Question

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

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

我应该如何在反应应用程序中设置此类内容？我见过/做过的所有事情总是有一个主要的包装元素，其路线呈现为儿童。

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设置它。我确信这很简单，我只是没有看到答案。

Answer 1

实现目标的一种方法是收听路由器。

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

当侦听器检测到您在不希望显示组件的视图上时，只需不要为该视图渲染它们。

React设置一次性路线

1 个答案: