Реакция вложенной маршрутизации не работает, пока код выглядит правильно

Question

Я использую React-маршрутизатор на React и хочу попробовать вложенную маршрутизацию. Согласно документам и многим другим веб-сайтам, следующий код работает правильно, но это не так.

Указатель. js

ReactDOM.render(
  <BrowserRouter>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </BrowserRouter>,
  document.getElementById("root")
);

Приложение. js

  render() {
    return (
      <div className="App">
        <Header  />
          <Switch>
            <Route
              path={`/Account`}
              render={() => (
                <Account {...this.state} onConnect={this.onConnect} />
              )}
            />
          ... and other Routes
          </Switch>
        )}
      </div>
    );
  }
);

Заголовок . js

return (
<Link to="/Account" className="ml1 no-underline black">
  Account
</Link>

.... and other links

Учетная запись. js

return (
<div>
  <Link to={`${url}`} component="button">
    AccountContent
  </Link>
  <Link to={`${url}/ComponentA`} component="button">
    ComponentA
  </Link>
  <Link to={`${url}/ComponentB`} component="button">
    ComponentB
  </Link>
  　
</div>
<Switch>
  <Route
    path={`${path}`}
    render={() => (
      <AccountContent  />
    )}
  />
  <Route
    path={`${path}/ComponentA`}
    render={() => (
      <ComponentA  />
    )}
  />
  <Route
    path={`${path}/ComponentB`}
    render={() => (
      <ComponentB  />
    )}
  />
</Switch>
);

Проблема, с которой я здесь сталкиваюсь, заключается в том, что маршрутизатор в учетной записи не работает. Кто-нибудь может помочь мне решить эту проблему? ПРИМЕЧАНИЕ. Конечно, приведенный выше код имеет правильный импорт.