反應路由器4如何嵌套路由/管理和/

我有嵌套路由的問題。在正常的網站上，我有其他的網站比在/管理頁面，我有不同的設計和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> 
    ) 
}

}

來源

2017-09-04 Olo

你作出反應的應用程序，它使用作出反應，路由器應該只定義了一個Router的一個實例，如文檔中表示：

共同的低級別接口所有路由器組件。通常應用程序將使用高層次的路由器中的一個，而不是

你所得到的錯誤是因爲你定義額外的路由器（你的情況有BrowserRouter的多個實例）在你的頁面和管理組件。

此外，您的一些路線含糊不清，例如

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

和：

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

一航說，根（「/」）應定位到頁面組件，對方說，根應導航至主成分，因此有衝突。確保路線是唯一的。

來源

2017-09-04 21:35:49

確定，但如何做，否則？在路由器的以前版本中，它更容易：/ – Olo

請參閱此處，瞭解有關react-router 4中嵌套路由的問題和答案，這應該可以幫助您解決https：// stackoverflow。COM/A /203371分之43311025。由於您的代碼目前在使用多個路由器，因此您有兩條路徑具有根路徑（即。/），這可能導致代碼也出錯。 –

我認爲主要問題是如何在/ admin loaction中隱藏

我改變我的方法來處理這種情況，但不工作。 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> 
    ) 
    } 
}

來源

2017-09-05 12:30:11 Olo

反應路由器4如何嵌套路由/管理和/

回答

相關問題