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