javascript - SPA React 产品组合导航

Question

我正在研究我的作品集，但我一辈子都不记得为单页应用程序设置导航的正确方法

这是应用程序的导航栏

    <div id="wrappper">
      <div id="nav-wrapper">
        <div id="myName">
          <h6>Geoffrey Hutson</h6>
        </div>
        <div className="navBar">
          <ul className="navBarList">
            <li className="navBarItems">
              <NavLink to="/">Home</NavLink>{" "}
            </li>
            <li className="navBarItems">
              <NavLink to="/about">About </NavLink>
            </li>
            <li className="navBarItems">
              <NavLink to="/skills">Skills</NavLink>
            </li>
            <li className="navBarItems">
              <NavLink to="/portfolio">Portfolio</NavLink>
            </li>
            <li className="navBarItems">
              <NavLink to="/contact">Contact</NavLink>
            </li>
          </ul>
        </div>
      </div>
    </div>

我的App.js

 <Router>
      <div className="App">
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
        </Switch>
      </div>
    </Router>

最后是我的index.js

  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.querySelector("#root")

单击时网址会发生变化，但页面不会跳转到我想要的位置，我很确定这是我设置组件的方式中的一个缺陷。但不确定

Answer 1

您需要像这样重新排序:

<Router>
  <div className="App">
    <Switch>
      <Route exact path="/about" component={About} />
      <Route exact path="/" component={Home} />
    </Switch>
  </div>
</Router>

根据我的经验，顺序很重要。我可能是错的。但请尝试一下