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

Question

我有嵌套路由的问题。 在普通网站上我有其他网址而不是/ admin页面，我有不同的设计和HTML。

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

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

APP组件

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组件

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

}

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

One Route表示root（'/'）应该导航到Page组件，另一个表示root应该导航到Home组件，因此存在冲突。 确保路线是唯一的。

Answer 2

我改变了我对这种情况的态度但是没有用。 Url / admin加载页眉和页脚组件虽然他不应该和组件仪表板不加载。

任何消化？

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