设置一条一次性路线 [英] 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.
我该如何在React应用中设置这种东西？我见过/完成的所有内容始终都有一个主要的包装元素，这些元素将路径渲染为子元素。
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
因此，如您所见，index.js入口点将呈现 < App /> 。 < App /> 将呈现主布局，其中包括< 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.
很酷。
但是我不希望这种一次性渲染< App /> 布局，我不确定如何从 index.js 进行设置。我确信它很简单，而且我没有看到答案。
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.
推荐答案
一种实现所需目标的方法是
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.
这篇关于设置一条一次性路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
