React router history pu sh переходит на начальный маршрут

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' для навигации между компонентами.