反应路由器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> 
    ) 
}

}

答

你作出反应的应用程序，它使用作出反应，路由器应该只定义了一个Router的一个实例，如文档中表示：

共同的低级别接口所有路由器组件。通常应用程序将使用高层次的路由器中的一个，而不是

你所得到的错误是因为你定义额外的路由器（你的情况有BrowserRouter的多个实例）在你的页面和管理组件。

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

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

和：

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

一航说，根（“/”）应定位到页面组件，对方说，根应导航至主成分，因此有冲突。确保路线是唯一的。

确定，但如何做，否则？在路由器的以前版本中，它更容易：/ – 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> 
    ) 
    } 
}

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

相关推荐