React router 4 如何嵌套路由 /admin 和 /答案

【问题标题】：React router 4 how to nested routes /admin and /React router 4 如何嵌套路由 /admin 和 /
【发布时间】：2018-02-13 02:38:47
【问题描述】：

嵌套路由有问题。在普通网站上，除了 / 管理页面，我还有其他 url，而且我有不同的设计和 html。

我准备了这个示例路由，但是页面刷新后，页面变白了，没有任何错误。

我可以要求咨询我做错了什么吗？

应用组件

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>
    );
}

}

页面组件

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>
    )
}

}

管理组件

class Admin extends React.Component {
render() {
    return (
       <BrowserRouter>
            <div>
                    <Route exact path="/admin" render={(props) => (
                        <Dashboard {...props} />
                    )} />

            </div>
        </BrowserRouter>
    )
}

}

【问题讨论】：

标签： javascript reactjs ecmascript-6 react-router

【解决方案1】：

您使用 React-Router 的 React 应用程序应该只定义一个 Router 的实例，如文档中所述：

所有路由器组件的通用低级接口。通常应用将改用其中一个高级路由器

您遇到的错误是因为您在页面和管理组件中定义了额外的路由器（在您的情况下，有多个 BrowserRouter 实例）。

你的一些路线也是模棱两可的，例如

<Route exact path="/" render={(props) => (
 <Page {...props} data={data} />
)} />

和：

<Route exact path="/" render={(props) => (
 <Home {...props} videosJson={this.props.data} />
)} />

一个 Route 说 root ('/') 应该导航到 Page 组件，另一个说 root 应该导航到 Home 组件，因此存在冲突。确保路线是唯一的。

【讨论】：

好的，不然怎么办？在以前版本的路由器中，它更容易：/
有关 react-router 4 中嵌套路由的问题和答案，请参见此处，这应该可以帮助您解决问题stackoverflow.com/a/43311025/203371。由于您的代码目前是，您有多个路由器的问题，而且您有两条路径的确切路径为根（即。/），这可能导致代码也出错。
我认为主要问题是如何在 /admin 位置隐藏
和

【解决方案2】：

我改变了对这种情况的处理方法，但不起作用。 Url /admin 加载 Header 和 Footer 组件虽然他不应该并且组件 Dashboard 不加载。

有什么建议吗？

<BrowserRouter>
            <div className="container">

                    <Page>
                        <Header />

                            <Route exact path="/" render={(props) => (
                                <Home {...props} videosJson={data} />
                            )} />

                            <Route path="/about" component={ About } />

                            <Route exact path="/video" render={(props) => (
                                <VideoGallery {...props} videosJson={data} />
                            )} />

                            <Route path="/video/:id" render={(props) => (
                                <VideoPage {...props} videosJson={data} />
                            )} />

                            <Route exact path="/photo" render={(props) => (
                                <PhotoGallery {...props} videosJson={data} />
                            )} />

                            <Route path="/photo/:id" render={(props) => (
                                <PhotoPage {...props} videosJson={data} />
                            )} />

                            <Route path="/contact" component={ Contact } />

                        <Footer />
                    </Page>

                    <Admin>
                        <Route exact path="/admin" render={(props) => (
                            <Dashboard />
                        )} />
                    </Admin>

            </div>
        </BrowserRouter>

管理组件：

class Admin extends React.Component {
  render() {
      console.log("ADMIN:", this.props);
      return (
        <div className="row">
            <h1>ADMIN</h1>
            {this.props.children}
        </div>
      )
   }
}

页面组件：

class Page extends React.Component {
   render() {
      console.log("PAGE:", this.props);
      return (
         <div>
            {this.props.children}
        </div>
      )
   }
}

【讨论】：