反应路由器v4路由已更改但未呈现正确的组件

Question

我有2级路线，第一层看起来像这样

<BrowserRouter>
  <div>
    <AuthRoute></AuthRoute>
    <Switch>
      <Route path='/dashboard' component={Dashboard} />
    </Switch>
  </div>
</BrowserRouter>

在AuthRoute中我在componentDidMount上有一个重定向this.props.history.replace( / dashboard / redirected qazxsw poi

问题出在仪表板/索引中，这是我的第二级路由配置

)

路线改为

<BrowserRouter>
  <Switch>
    <Route exact path='/dashboard' component={()=><h1>dashboard index</h1>} />
    <Route exact path='/dashboard/somewhere' component={()=><h1>somewhere</h1>} />
    <Route exact path='/dashboard/redirected' component={() => <h1>redirected</h1>} />
  </Switch>
</BrowserRouter>

，但如果刷新，则该组件没有呈现正确的路线说/dashboard/redirect或/dashboard/somewhere

您可以在我设置/dashboard/的演示中看到问题更清晰

Answer 1

您只需要在应用程序中使用一个https://codesandbox.io/s/v0v4qok38l - 从<BrowserRouter>中删除它将解决您的问题。