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

【问题标题】：Why react-router combines previous route with a new one?为什么 react-router 将先前的路由与新的路由结合起来？
【发布时间】：2019-01-28 16:16:21
【问题描述】：

这是我的 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 ？我做错了什么？

【问题讨论】：

标签： javascript reactjs navigation react-router

【解决方案1】：

在链接中使用反斜杠：

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

【讨论】：

【解决方案2】：

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

    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 中添加反斜杠并解构 props

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

【讨论】：