反应路由器历史记录推送到初始路径

Question

我在App.tsx中具有以下路由配置

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

在Layout组件中的路由如下所示

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

如果我尝试通过将URL粘贴到浏览器中来访问路径/layout/authordocument/:id/edit，则效果很好

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

这里有什么主意吗？

我正在使用Home在各个组件之间导航。