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中的路由配置中解决了这个问题。

你的应用程序组件呈现嵌套路由，但是当直接访问时（例如，如果嵌套路由被加入书签），页面是空白的，因为根组件没有与要呈现完全匹配的Route（删除'确切'道具并没有改变我的情况。）

保持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。

与孩子一起使用react-router-dom

1 个答案: