使用反应路由器-DOM儿童

Question

我试图用孩子的路线内只有与反应路由器-DOM我无法访问this.props.childre所以我就是这么做的：

Index.js：

<Router> 
    <div> 
     <Route exact path="/" component={App}/> 
     <Route path="/login" component={Login}/> 
     <Route path="/forgot-password" component={ForgotPassword}/> 
     <Route path="/register" component={Register}/> 
     <Route path="/bank-account" component={BankAccount}/> 
    </div> 
</Router> 

App.js：

<Router> 
    <div className="uk-offcanvas-content"> 
     <Header store={this.context.store}/> 
     <main className="wt-main"> 
      <SideBar/> 
      <Route exact path="/" component={Dashboard} /> 
      <Route exact path="/historic" component={Historic}/> 
      <Route exact path="/profile" component={Profile} profile={profile}/> 
      <Route exact path="/receivable" component={Receivable}/> 
      <Route exact path="/operators" component={Operators}/> 
      <Route exact path="/create-operator" component={CreateOperator}/> 
     </main> 
     <footer> 
     </footer> 
     <SideBarResponsive/> 
    </div> 

的问题是，当我尝试访问内部路由s通过浏览器它出现一个空白页面，但如果我访问链接或重定向它正常工作

Answer 1

我挣扎着与我正在处理的仪表板容器相同的问题。我发现将我在容器的render方法中嵌套的路由添加到我的index.js中的路由配置中可以解决问题。

您的应用程序组件呈现嵌套路线，但直接访问时（例如，如果嵌套路线为书签），页面为空白，因为根组件不具有完全匹配呈现的路线（删除“确切'道具并没有改变我的情况）。

离开App.js原样，并且嵌套路由添加到您的index.js：

<Router> 
    <div> 
    <Route exact path="/" component={App}/> 
    <Route path="/login" component={Login}/> 
    <Route path="/forgot-password" component={ForgotPassword}/> 
    <Route path="/register" component={Register}/> 
    <Route path="/bank-account" component={BankAccount}/> 
    <Route exact path="/" component={Dashboard} /> 
    <Route exact path="/historic" component={Historic}/> 
    <Route exact path="/profile" component={Profile} profile={profile}/> 
    <Route exact path="/receivable" component={Receivable}/> 
    <Route exact path="/operators" component={Operators}/> 
    <Route exact path="/create-operator" component={CreateOperator}/> 
    </div> 
</Router> 

文档目前没有将其指定为使用旧路由的配置结构在需要的时候，然而同样的V4问题/解决方案可以通过将示例代码（从https://reacttraining.com/react-router/web/example/route-config）放入您的应用程序中并在index.js中为其创建路线来复制。