Реагируйте роутер, страница не перестанет загружаться

Question

создание простого сайта реакции для практики и попытка добавить маршруты, чтобы мое меню работало. Я попробовал несколько способов и много смотрел в stackoverflow, не нашел рабочего решения для моей проблемы. Я не уверен, где разместить Router , если я положу его туда, где находится моя навигационная панель, или в указателе, где я рендерирую App ?. Независимо от того, что я пробовал, он просто застревает в режиме перезагрузки.

Это моя последняя попытка: я пытаюсь заменить ссылки меню bootstrap ссылкой>, как это выглядит здесь: ссылка все тот же результат застрял при перезагрузке Код заголовка, где код меню:

 function Header(props) {
  return (
    <header>
      <div className="container">
        <nav class="navbar navbar-expand-md navbar-light">
          <div class="mx-auto order-0">
            <a
              className="brand-stype"
              className="navbar-brand mx-auto"
              href="/"
            >
              home
            </a>
            <button
              class="navbar-toggler"
              type="button"
              data-toggle="collapse"
              data-target=".dual-collapse2"
            >
              <span className="navbar-toggler-icon"></span>
            </button>
          </div>
          <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
            <ul class="navbar-nav ml-auto">


              <NavItem eventKey={1} href="/">
                <NavLink exact activeClassName="active" to="/about">
                  about
                </NavLink>
              </NavItem>
            </ul>
          </div>
        </nav>
      </div>
    </header>
  );
}

Мое приложение. js код

    const App = () => {
  return (

    <div>
      <div className="all-containers">     
         <Header />
        <Photos />
      </div>

      <HowItWorks />
      <Calc />
      <Insta />
      <Footer />

          <Switch>
           <Route exact path='/' component={App} />
           <Route exact path='/about' component={About} />
           <Route render={function () {
                 return <p>Not found</p>
           }} />
          </Switch>

    </div>
  );
};

export default App;

Мой индекс. js файл

 ReactDOM.render(
    <Router>
    <App />
  </Router>,
  document.getElementById("root")
);
);

Ошибка, которую я получил после добавления маршрутизатора, как сказано в комментарии ниже:

Answer 1

Вы должны поместить свой маршрутизатор и верхний уровень:

ReactDOM.render(
 <Router>
  <App />
</Router>,

  document.getElementById("root")
);

Он просто вводит необходимые вещи, используя контекст, чтобы вы могли свободно использовать маршрутизатор в любом месте вашего приложения.