Question

我在不同文件（Routes.js，dashboard / index.js）上有两个不同的反应路由器，如下所示：

Routes.js

// I am loading BrowserRouter as Router
  <Router>
    <Switch>
      {privateChildRoutes(DashboardLayout, dashboardRoutes)}
      <PublicRoute restricted={true} component={SignIn} path="/auth/sign-in" exact />
      <PublicRoute restricted={true} component={SignUp} path="/auth/sign-up" exact />
    </Switch>
  </Router>

Dashboard / index.js

  <Router>
  <Switch>
    <Route path="/tasks" render={props => <TasksApp {...props} />} />
    <Route  path="/:value/runs" render={props => <TaskRunApp {...props} />} />
    <Route path="/:value/input"  render={props => <RunInputApp {...props} />} />
  </Switch>
  </Router>

在运行路由器时，我在浏览器中发现了几种情况。当我从/:value/runs运行/tasks时，它会完美加载，但是当我刷新:value/runs时，它将返回空白页面。

所以我运行了console.log()来检查路由器序列。事实证明，首先加载Routes.js中的路由，然后是dashboard/index.js中的路由器。因此，当我刷新/:value/runs中的页面时，首先加载Routes.js中的路由器，然后加载dashboard/index.js，除非我从:value/runs返回加载/tasks，否则它将呈现空白页面。

我希望路由器在刷新dashboard/index.js时直接从:value/runs加载，而不用触摸Routes.js中的路由器，因为它会在刷新时返回空白页面。

我该如何实现？并且有更好的方法来对齐我的路由器。谢谢。

结果刷新时出现空白页问题

0 个答案: