javascript - React 设置一次性路线-6ren

javascript - React 设置一次性路线

转载作者：行者123 更新时间：2023-12-03 03:11:23

24

4

我有一个应用程序，它对所有路线使用相同的布局......除了一条路线。一条路线将与其他所有路线完全不同。

所以整个应用程序将有菜单、正文、页脚等。一次性路线不会有任何这些，并且是完全独立的东西。

我应该如何在 react 应用程序中设置这种东西？我所见过/做过的所有事情总是有一个主要的包装元素，该元素将路由渲染为子元素。

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'

import { Provider } from 'react-redux'
import configureStore from './store'

import App from './components/App'
// import registerServiceWorker from './registerServiceWorker'
import { unregister } from './registerServiceWorker'

const preloadedState = window.__PRELOADED_STATE__ ? window.__PRELOADED_STATE__ : {}
// console.log('window.__PRELOADED_STATE__', window.__PRELOADED_STATE__)
delete window.__PRELOADED_STATE__

const Store = configureStore(preloadedState)

const rootEl = document.getElementById('root')

ReactDOM.hydrate(
    <Provider store={Store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>,
    rootEl
)

if(module.hot){
    module.hot.accept('./components/App', () => {
        ReactDOM.hydrate(
            <Provider store={Store}>
                <BrowserRouter>
                    <App />
                </BrowserRouter>
            </Provider>,
            rootEl
        )
    })
}

// registerServiceWorker()
unregister()

App.js

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'

// Components
import AppHelmet from './AppHelmet'
import Notices from './Notices'
import Header from './Header'
import Body from './Body'
import Footer from './Footer'

// Site state
import { getSiteInfo } from '../store/actions/siteInfo'
import { REACT_APP_SITE_KEY } from '../shared/vars'

// CSS
import '../css/general.css'

class App extends Component {
    initialAction() {
        this.props.getSiteInfo(REACT_APP_SITE_KEY)
    }

    componentWillMount() {
        // On client and site info has not been fetched yet
        if(this.props.siteInfo.site === undefined){
            this.initialAction()
        }
    }

    render() {
        return (
            <div>
                <AppHelmet {...this.props} />
                <Notices />
                <div className="body">
                    <Header />
                    <Body />
                </div>
                <Footer />
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        siteInfo: state.siteInfo,
        user: state.user
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        getSiteInfo: (siteKey) => dispatch(getSiteInfo(siteKey))
    }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App))

Body.js

import React, { Component } from 'react'
import { Switch, Route } from 'react-router-dom'
import routes from '../shared/routes'

class Body extends Component {
    render() {
        return (
            <Switch>
                {routes.map((route, i) => <Route key={i} {...route} />)}
            </Switch>
        )
    }
}

export default Body

因此，正如您所看到的，index.js 入口点将呈现 <App /> 。 <App />将渲染主布局，包括 <Body /> ，它呈现所有路线和内容。

酷。

但是我不希望这个一次性渲染 <App />布局，我不知道如何从index.js进行设置。我确信这很简单，但我只是没有看到答案。

最佳答案

实现您想要的目的的一种方法是监听路由器。

您可以将监听器添加到您想要隐藏的组件中。

当监听器检测到您所在的 View 中您不希望显示组件时，只需不要为该 View 渲染它们即可。

关于javascript - React 设置一次性路线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46936988/

24

4

0

文章推荐： Javascript 过滤列表并从中返回匹配的项目

文章推荐： javascript - 在 d3.js 中添加图像

文章推荐： javascript - 将Javascript变量变成全局变量

c# - XmlWriter - 一次性
我无法理解 XmlWriter 在 C# 中的工作方式。假设以下代码在某处使用过。 StringBuilder builder = new StringBuilder(); XmlWriterSett
android - 一次性、一次性观察者和复合一次性的区别
两者的主要区别是什么一次性一次性观察者复合 Material 一次性何时使用它们中的每一个最佳答案 Disposable 是可以取消的作业。CompositeDisposable 是一个父作
javascript - 一次性 QML 列间距覆盖
我使用 QML 列布局，但我只想禁用(或减少)两个元素之间的间距。其余之间的间距应单独保留。这可能吗？谢谢。最佳答案减少是困难的，但增加两个相邻项之间的间距很容易:只需在它们之间插入一个空的
c# - MVC 一次性 Controller
我有一个“设置” View 和关联的 Controller ，在从源代码管理克隆站点后，我立即使用它们来配置 MVC 站点的数据库和 web.config。运行一次后，我想防止“设置” Contro
macros - 一次性 lisp 宏，我的实现是否正确？
我正在尝试从 Peter Seibel 的《Practical Common Lisp》一书中学习 Lisp。在 chapter 8 : "Macros: Defining your own" ，我遇
android - 从正确的线程调用 RxJava2 可取消/一次性
我正在实现一个从 Resource 发出行的可观察对象. 问题是这个资源真的不喜欢从创建它的不同线程关闭(它会杀死一只小狗并在发生这种情况时抛出异常)。当我处理订阅时，资源 Cancellable/
heroku - 查看退出的 Heroku 一次性 dyno 的日志
假设我使用以下命令启动了一次性流程:heroku run:detached "node do-some-stuff.js" --app my-app命令的输出是这样的: /usr/local/hero
heroku - 为 Heroku 一次性 Dynos 识别用户
是否可以识别正在运行一次性 dyno(即 heroku run rails console)的用户(可能通过 Heroku 电子邮件)？用例自动将更改归因于该用户。最佳答案我认为这是不可能的，因为
django - 一次性 Django 脚本的已弃用 setup_environ() 的替代方案？
前一段时间我使用 setup_environ() 编写了一个从命令行运行的一次性 python 脚本，它不太适合作为自定义 manage.py 命令(我的首选)。它很好地设置了一切。我假设我们弃用了这
java - Android RX Java 2 一次性
当我使用 RXJava 1 时，我总是跟踪我的订阅以在 onDestroy Activity 中执行取消订阅。示例:https://medium.com/@scanarch/how-to-leak-m
asp.net-core-mvc - MVC6 TagHelpers 一次性
在较旧的 MVC HTML 帮助程序中，可以使用 IDisposable 来包装内容 - 例如 BeginForm 帮助程序会自动包装 *stuff*带有结束 form 标记 *stuff*
.net - 一次性 System.Threading.Timer 如何 self 处置？
我想使用 System.Threading.Timer 执行一次。该计时器应该在不再需要时(即回调触发时)通过调用 Dispose 来确定性地清理。问题在于回调无法可靠地获取对 Timer 的引用!
javascript - angular 1.5 - 单向数据流 - parent 只在第一次更新子原始值，一次性？
我是 Angular 1.5 的新手，正在学习单向数据流的最佳实践。我要离开这个 jsfiddle，我真的很困惑特别是一种行为。我理解数据从父级向下流向子级并且是单向绑定(bind)的，即子级的变化
javascript - 收到 JSON 时的 jQuery 事件 - 一次性 URL
我正在尝试抓取一个使用大量 ajax 效果在表格中显示数据的网站。当您与网站交互时，会通过 JSON 返回一些数据。我知道 URL 以及如何构造它，但如果我尝试重新请求此 JSON，服务器会返回
linux - 一次性*级别*-触发 epoll() : Does EPOLLONESHOT imply EPOLLET?
是否可以在一次性级触发模式下使用epoll？当我搜索时，我找不到任何关于它的信息；好像大家都用边沿触发的方式。最佳答案 When the EPOLLONESHOT flag is selected
functional-programming - 理解(子、部分、完整、一次性)延续(程序语言)
在阅读了我能找到的关于延续的几乎所有内容后，我仍然无法理解它们。也许是因为所有的解释都与 lambda 演算密切相关，我很难理解。通常，在您完成当前的事情(即计算的其余部分)之后，continuat
c# - Razor:自定义 BeginForm()-like Razor 一次性 block 在某些情况下不起作用
我有一个 block 的自定义实现，它的工作方式很像 Html.BeginForm() .实现基本如下: public class MyBlock : IDisposable { privat
asp.net - 经典 ASP 到 ASP.Net 一次性 session 数据复制
我们有一个广泛的经典 ASP 站点，我们正在寻求升级到 ASP .Net(很可能是最新版本)。显然，一次升级所有页面将是一项艰巨的任务，因此我们一开始只希望在 ASP .Net 中编写新页面(和页面重
Python Django DRF API 一次性 session / token /通行证身份验证，无需用户名/密码
我有一个 Django 和 django 休息框架项目，我希望移动设备能够请求 token ，然后在断开连接之前使用该 token x 分钟。我不想为每个移动设备创建一个用户，我只想要一个一次性密码。
javascript - 通过 Forte 支付处理、一次性 token 和 REST API 进行 ACH 电子支票支付
我正在通过 Forte.js 集成 ACH eCheck 付款。文档说第一步是获取一次性安全 token ，我就是这样做的，使用 forte.js . 那么我应该将此 token 用于 REST A

首页

博学

6Ren·AI

商城

javascript - React 设置一次性路线