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

Question

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

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

在AuthRoute中，我在componentDidMount上有一个重定向 this.props.history.replace( /仪表板/重定向)

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

<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/

，则该组件无法呈现正确的路线

您可以在我设置的演示https://codesandbox.io/s/v0v4qok38l

中看到问题更清晰

Answer 1

您只需在应用中使用一个reified - 将其从<BrowserRouter>中移除即可解决您的问题。