Возникшая проблема с пустой страницей при refre sh response

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, он загружается отлично, но когда я делаю refre sh на :value/runs, он возвращает пустую страницу.

Итак, я запустил console.log() на проверьте последовательность маршрутизатора. Оказывается, сначала загружаются маршруты из Routes.js, а затем маршрутизаторы из dashboard/index.js. Поэтому, когда я обновляю sh страницу в /:value/runs, маршрутизаторы в Routes. js загружаю сначала, а затем dashboard/index.js, он отображает пустую страницу, если я go не вернусь к загрузке :value/runs из /tasks.

Я хочу, чтобы маршрутизаторы загружались напрямую из dashboard/index.js, когда я обновляю sh :value/runs, не касаясь маршрутизаторов в Routes.js, потому что он вернет пустую страницу при refre sh.

Как я мог этого добиться? И есть ли способ лучше настроить мои роутеры. Спасибо.