Javascript 水疗产品组合导航

我正在处理我的公文包，我一辈子都记不起为单页应用程序设置导航的正确方法

这是应用程序的导航栏

    <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")

,
document.querySelector（“根”）

---

url在单击时会更改，但页面不会跳转到我希望它去的地方，我很确定这是我如何设置组件的一个缺陷。但不确定

您需要这样重新订购：

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

根据我的经验，订购很重要。

---

我可能错了。但是试一试

你的链接在

路由器

的某个地方吗？另外，您为什么同时使用

浏览器路由器

和

路由器

？这对我来说似乎不熟悉。