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

Question

我对嵌套路由有疑问。在普通网站上，我有其他网址而不是/管理页面，我有不同的设计和 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>
    )
}

Answer 1

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

The common low-level interface for all router components. Typically apps will use one of the high-level routers instead

您收到的错误是因为您在页面和管理组件中定义了额外的路由器(在您的情况下有多个 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 组件，因此存在冲突。确保路线是唯一的。