0

我正在尝试使用儿童，仅在使用 react-router-dom 的路线内我无法访问 this.props.childre 所以我这样做了：

索引.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>

应用程序.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>

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

4

1 回答 1

0

对于我正在处理的仪表板容器，我遇到了同样的问题。我发现将嵌套在容器的渲染方法中的路由添加到我的 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 中为其创建一个路由。

于 2017-07-17T23:25:14.080 回答