对孩子使用react-router-dom

Question

我正在尝试使用孩子，只在一个使用react-router-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>

​

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

Answer 1

对于我正在处理的一个仪表板容器，我也遇到了同样的问题。我发现将嵌套在容器的render方法中的路由添加到index.js的路由配置中就解决了这个问题。

你的App组件渲染嵌套的路由，但当直接访问时(例如，如果嵌套的路由被添加了书签)，页面是空白的，因为根组件没有要呈现的具有精确匹配的route (在我的例子中，删除' exact‘属性并没有改变这一点)。

保留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中为其创建路由来复制相同的问题/解决方案。