React-роутер не работает при наборе URL в браузере

Question

У меня есть два уровня маршрутов.Верхним уровнем является App.js, чтобы определить, должна ли отображаться страница входа в систему или макет.Второй уровень - Layout.js, который определяет отдельные страницы для отображения в макете.

Проблема заключается в том, что при добавлении маршрутизатора верхнего уровня в App.js ссылки на Page1 и Page2 работают толькопри нажатии на в приложении.Когда я пытаюсь ввести localhost / page1 в строке URL браузера, он ничего не показывает.Обновление браузера также ничего не делает.Работает только обновление пути /.

Если я не использую маршрутизатор в App.js, поведение нормальное, и следуют пути браузера.

Вероятно, это связано сУровень маршрутизатора перехватывает запрос URL.Как я могу получить Маршрутизатор в Layout.js, который вложен в App.js для работы с вводом в localhost / page1 в URL браузера?Или есть другой способ реализовать отдельную страницу входа?

App.js (верхний уровень):

class App extends Component {
  render() {
    return (
      <div>

        <Router>
          <Switch>
            <Route exact path="/" component={withAuth(Layout)} />
            <Route path="/login" component={Login} />
          </Switch>
        </Router>

      </div>
    );
  }
}
export default App;

Layout.js (вложенныйуровень):

class Layout extends React.Component {
  render() {
    return (
      <div>
          <Header /> 
          <Router>
            <div className="wrapper">
              <Sidebar /> {/* Displays the links */}
                <div id="content">
                  <Route exact path='/' component={withAuth(Overview)} />
                  <Route path='/Page1' component={withAuth(Page1)} />
                  <Route  path='/Page2' component={withAuth(Page2)} />
                </div>
            </div>
          </Router>
      </div>
    );
  }
}
export default Layout;