Question

建立一个简单的React网站进行练习，并尝试添加路线，以便我的菜单正常运行。我尝试了几种方法，但在stackoverflow中看起来很多，却找不到适合我问题的解决方案。我不确定将 Router 放置在哪里，应该将其放置在导航栏所在的位置还是在呈现 App 的索引中？无论我尝试了什么，它都陷入了重新加载模式。

这是我的最新尝试：我尝试将Bootstrap菜单链接替换为Link>，如下所示： 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;

我的index.js文件

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

添加路由器后出现的错误，如下面的评论所述：

Answer 1

您应该将路由器和顶部lvl：

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

  document.getElementById("root")
);

它只是使用上下文注入必要的东西，因此您可以在应用程序中的任何位置自由使用路由器。

React Router页面不会停止重新加载

1 个答案: