React setting up a one-off route

问题

I have an application that uses the same layout for all routes... except one. One route will be completely different than all others.

So the entire application will have a menu, body, footer, etc. The one-off route will not have any of that and be a completely separate thing.

How should I set this kinda thing up in a react app? Everything I've ever seen/done always has one main wrapping element that has the routes rendered as children.

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

So, as you can see the index.js entry point will render <App />. <App /> will render the main layout, including <Body />, which renders all routes and content.

Cool.

But seeing as I don't want this one-off to render the <App /> layout, I'm not sure how to set this up from index.js. I'm sure it's simple and I'm just not seeing the answer.

回答1:

One way to achieve what you want is to listen to the router.

You can add the listener into the components you want to hide.

When the listener detects you're on a view where you do not want the components to show, simply don't render them for that view.

来源：https://stackoverflow.com/questions/46936988/react-setting-up-a-one-off-route

标签

javascript

reactjs

routes