Reactjs 对赢得的页面作出反应'；不要停止重新加载

建立简单的反应练习网站，并尝试添加路线，使我的菜单将工作。 我尝试了一些方法，在stackoverflow中查找了很多，但没有找到解决问题的有效方法。 我不确定路由器应该放在哪里，我应该把它放在导航栏所在的位置，还是放在我渲染应用程序的索引中？。不管我怎么试，它都会卡在重新加载模式

这是我的最新尝试：我尝试用Link>替换引导菜单链接，如下所示： 重新加载时仍然会出现相同的结果 菜单代码所在的标题代码：

 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>
  );
}

功能标题（道具）{
返回(

关于

);
}

我的App.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;

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

const-App=（）=>{
返回(
);
};
导出默认应用程序；

My index.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;

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

ReactDOM.render(
您应该将路由器和顶级lvl：

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

  document.getElementById("root")
);

ReactDOM.render(
,
document.getElementById（“根”）
);

它只是使用上下文注入必要的内容，以便您可以在应用程序中的任何位置自由使用路由器。
现在我遇到一个错误：“TypeError:无法读取未定义的属性'location'”你知道我该怎么解决吗？你能发布有这个错误的代码片段吗？我不知道你在哪里使用它？你还有一个很大的不不不，你有一个渲染递归：应用程序正在渲染头，然后头正在渲染应用程序，如果是特定的路径。你应该提取头部分到应用程序组件的开关，然后删除，并将应显示在“/”上的内容放在此处，您的应用程序内容是顶级lvl组件（更像布局组件），如您所说更新了帖子和代码。删除了除1个测试菜单项之外的所有内容。仍然存在相同的错误