react-router-dom - React 路由器历史推送进入初始路由

Question

我在 App.tsx 中有如下的路由配置

<BrowserRouter>
  <Navbar />
  <div>
    <Switch>
      <Route path="/" component={Home} exact />
      <Route path="/layout" component={Layout} />
      <Layout />
    </Switch>
  </div>
</BrowserRouter>

在布局组件路由如下

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div>
  <Switch>
    <Route path="/layout/dashboard" component={Dashboard} />
    <Route path="/layout/authordocument/:id/edit" component={Editor} />
    <Route path="/layout/authordocument/:id" component={DocumentView} />
    <Route path="/layout/authordocument" component={AuthorDocument} />
    <Route path="/layout/managetemplate/:id" component={TemplateView} />
    <Route path="/layout/managetemplate" component={ManageTemplates} />
  </Switch>
</div>

如果我尝试/layout/authordocument/:id/edit通过在浏览器中粘贴 URL 来访问路径，它工作正常

但是，如果我已经在路径中/layout/authordocument/:id，然后尝试通过代码导航Link或导航history.push到，/layout/authordocument/:id/edit那么path="/"由于某些原因，它就是组件Home。

知道这里可能有什么问题吗？

我import { useHistory, Link, withRouter } from 'react-router-dom'用来在组件之间导航。

标签： react-router-dom