javascript - 为什么 react-router 将先前的路由与新的路由结合起来？

Question

这是我的 Router.js 文件

// imports here

export default () => (
  <Router>
    <App>
      <Route exact path="/" component={Home} />
      <Route exact path="/users" component={Users} />
      <Route path="/users/:id" component={User} />
      <Route path="/about" component={About} />
    </App>
  </Router>
);

和我的 App.js 文件

const App = props => (
  <div>
    <nav>
      <Link to="/">Home</Link>
      <Link to={{ pathname: '/users', state: { prevPath: props.location.pathname } }}>Users</Link>
      <Link to="about">About</Link>
    </nav>
    {props.children}
  </div>
);

export default compose(withRouter)(App);

当我选择 '/users' 路径，然后单击任何用户导航到 '/users/:id' 时，它工作正常并且路由是http://localhost:3000/users/some-user-id。但是当我想在这条路线之后导航到路线'/about'

url 地址变成http://localhost:3000/users/about，而不是http://localhost:3000/about？我究竟做错了什么 ？

标签： javascriptreactjsnavigationreact-router

Answer 1

在关于页面的链接中添加精确

    export default () => (
      <Router>
        <App>
          <Route exact path="/" component={Home} />
          <Route exact path="/users" component={Users} />
          <Route path="/users/:id" component={User} />
          <Route exact path="/about" component={About} />
        </App>
      </Router>
    );

并在 App.js 中添加反斜杠并解构道具

const App = ({children, location}) => (
  <div>
    <nav>
      <Link to="/">Home</Link>
      <Link to={{ pathname: '/users', state: { prevPath: location.pathname } }}>Users</Link>
      <Link to="/about">About</Link>
    </nav>

    {children}
  </div>
);

export default compose(withRouter)(App);