React-Router-Dom-v4 версия этого кода?

Question

У меня есть этот код, который я пытался преобразовать в response-router-v4.Идея состоит в том, что компонент приложения отображается всегда, и тогда любая вкладка, на которой я сейчас активен, изменит (отобразит) представление внутри отображаемого приложения.У меня возникли проблемы с преобразованием, и я был бы очень признателен за помощь.У меня есть идея, что IndexRoute должен быть изменен на Маршрут, так как я почти уверен, что он был обесценен по отношению к точному пути маршрута, но что касается вложенных Маршрутов, я понятия не имею, это была моя ближайшая попытка ....версия React-router-v3, которая раньше работала.

  <BrowserRouter>
      <Route path="/home" component={HomePage} />
      <Route path="dashboard" exact component={AsyncDashboard} />
      <Route path="input" exact component={AsyncInput} />
      <Route path="calendar" exact component={AsyncCalendar} />
      <Route path="dropdown" exact component={AsyncDropdowns} />
      <Route path="range-picker" exact component={AsyncRangePicker} />
      <Route path="chart" exact component={AsyncChart} />
      <Route path="layout" exact component={AsyncLayout} />
  </BrowserRouter>

<Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute exact component={AsyncDashboard} />
      <Route path="dashboard" exact component={AsyncDashboard} />
      <Route path="input" exact component={AsyncInput} />
      <Route path="calendar" exact component={AsyncCalendar} />
      <Route path="dropdown" exact component={AsyncDropdowns} />
      <Route path="range-picker" exact component={AsyncRangePicker} />
      <Route path="chart" exact component={AsyncChart} />
      <Route path="layout" exact component={AsyncLayout} />
    </Route>
  </Router>

Answer 1

• Вместо переноса App в Route используйте его непосредственно
• Используйте Route с путем / вместо IndexRoute

<BrowserRouter>
  <App>
    <Route path='/' exact component={AsyncDashboard} />
    <Route path="/dashboard" exact component={AsyncDashboard} />
    <Route path="/input" exact component={AsyncInput} />
    <Route path="/calendar" exact component={AsyncCalendar} />
    <Route path="/dropdown" exact component={AsyncDropdowns} />
    <Route path="/range-picker" exact component={AsyncRangePicker} />
    <Route path="/chart" exact component={AsyncChart} />
    <Route path="/layout" exact component={AsyncLayout} />
  </App>
</BrowserRouter>