Question

我正在处理自己的作品集，并且我一生都无法记住为单页应用程序设置导航的正确方法

这是该应用程序的导航栏

const verify = (obj: any, options: Option[]): boolean => {
  const results = options.map(option => {
    const { path, isVerified } = option

    // this line needs a type assertion
    return (isVerified as (t: Paths[typeof path]) => boolean)(obj[path])
  })
  return results.every(x => x)
}

我的App.js

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

最后是我的index.js

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

单击时URL会更改，但是页面不会跳到我想要的位置，我很确定这是我设置组件方式的一个缺陷。但不确定

Answer 1

您需要像这样重新排序：

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

根据我的经验，订购很重要。我可能是错的。但是去吧

导航SPA React产品组合

1 个答案: