我有嵌套路由的问题。 在正常的网站上,我有其他的网站比在/管理页面,我有不同的设计和HTML。反应路由器4如何嵌套路由/管理和/
我准备了这个示例路由,但页面刷新后,页面变为白色,没有任何错误。
我可以问一个咨询我做错了什么?
APP COMPONENT
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="container">
<Route exact path="/" render={(props) => (
<Page {...props} data={data} />
)} />
<Route exact path="/admin" render={(props) => (
<Admin {...props} data={data} />
)} />
</div>
</BrowserRouter>
);
}
}
PAGE COMPONENT
class Page extends React.Component {
render() {
return (
<BrowserRouter>
<div>
<Header />
<Route exact path="/" render={(props) => (
<Home {...props} videosJson={this.props.data} />
)} />
<Route path="/about" component={ About } />
<Route exact path="/video" render={(props) => (
<VideoGallery {...props} videosJson={this.props.data} />
)} />
<Route path="/video/:id" render={(props) => (
<VideoPage {...props} videosJson={this.props.data} />
)} />
<Route exact path="/photo" render={(props) => (
<PhotoGallery {...props} videosJson={this.props.data} />
)} />
<Route path="/photo/:id" render={(props) => (
<PhotoPage {...props} videosJson={this.props.data} />
)} />
<Route path="/contact" component={ Contact } />
<Footer />
</div>
</BrowserRouter>
)
}
}
ADMIN COMPONENT
class Admin extends React.Component {
render() {
return (
<BrowserRouter>
<div>
<Route exact path="/admin" render={(props) => (
<Dashboard {...props} />
)} />
</div>
</BrowserRouter>
)
}
}
确定,但如何做,否则?在路由器的以前版本中,它更容易:/ – Olo
请参阅此处,了解有关react-router 4中嵌套路由的问题和答案,这应该可以帮助您解决https:// stackoverflow。COM/A /203371分之43311025。由于您的代码目前在使用多个路由器,因此您有两条路径具有根路径(即。/),这可能导致代码也出错。 –
我认为主要问题是如何在/ admin loaction中隐藏