如何使用 react router 4.2.2 的 withRouter 在 React 中获得正确的当前路径？答案

【问题标题】：How can I get the correct current path in React using react router 4.2.2's withRouter?如何使用 react router 4.2.2 的 withRouter 在 React 中获得正确的当前路径？
【发布时间】：2018-11-03 09:24:22
【问题描述】：

所以我有一些文件：

App.js

class App extends React.Component {

    render() {
        return (
            <div >
                <NavBar />
                <Main />
            </div>
        );
    }

}

export default App;

NavBar.js

class NavBar extends React.Component {

  render() {
    console.log(this.props.match)
    return (
      <div className="navbar-fixed">
        <nav className="light-blue lighten-1">
          <div className="nav-wrapper container">
            <a className="brand-logo">Logo</a>
            <ul id="nav-mobile" className="right hide-on-med-and-down">
              <li><NavLink exact to="/characters" activeClassName="active">Characters</NavLink></li>
              <li><NavLink exact to="/locations" activeClassName="active">Locations</NavLink></li>
            </ul>
          </div>
        </nav>
      </div>
    );
  }
}

export default withRouter(NavBar);

Main.js

class Main extends React.Component {
    render() {
        return (
            <Switch>
                <Route exact path="/characters" component={Characters}/>
                <Route exact path="/locations" component={Locations}/>
            </Switch>
        );
    }
}

export default Main;

路由工作，虽然在 NavBar 文件中，我有 console.log(this.props.match) 行，我总是得到相同的路径，activeClassName 甚至不起作用。

每当我改变位置时，输出总是：

{
    path: "/", 
    url: "/", 
    params: {…}, 
    isExact: false
}

唯一改变的是密钥isExact。

我现在可以使用this.props.location 访问路径名，但我必须自己登录才能使活动的类名起作用。

我在这里遗漏了什么吗？任何帮助将不胜感激。

【问题讨论】：

How to get current route in react-router 2.0.0-rc5的可能重复

标签： javascript reactjs react-router

【解决方案1】：

this.props.match 为您提供最接近匹配父级的匹配参数，而不是匹配的子级中的 Route，因为 App 位于顶层并与 path='/' 匹配，因此在 Navbar 中打印将始终返回你

{
    path: "/", 
    url: "/", 
    params: {…}, 
    isExact: false
}

现在说在你的情况下Characters 组件有一个子路由（请注意，如果你在其中嵌套了路由，则不应使用精确关键字），你将其定义为

render() {
   return (
      <div>
          {/* other stuff*/}
          <Route path={`${this.props.match.path}/:characterId`} component={Character} />
      </div>
   )
}

在这种情况下，即使您的网址可能是/characters/character-1，字符组件中的console.log(this.props.match) 也会返回您

{
    path: "/character", 
    url: "/character", 
    params: {…}, 
    isExact: false
}

考虑到 isExact 的变化值，它会根据整个 url 是否与您的 Route url 匹配的事实返回您 true of false

【讨论】：

【解决方案2】：

使用withRouter 将location 对象附加到组件属性：

class NavBar extends React.Component {
  // just for reference
  static propTypes = {
    location: PropTypes.object
  }

  render() {
    console.log("Location", this.props.location);
    return (
      <div className="navbar-fixed">
        <nav className="light-blue lighten-1">
          <div className="nav-wrapper container">
            <a className="brand-logo">Logo</a>
            <ul id="nav-mobile" className="right hide-on-med-and-down">
              <li><NavLink exact to="/characters" activeClassName="active">Characters</NavLink></li>
              <li><NavLink exact to="/locations" activeClassName="active">Locations</NavLink></li>
            </ul>
          </div>
        </nav>
      </div>
    );
  }
}

export default withRouter(NavBar);

props.location 的形状为：

{
  key: 'ac3df4',
  pathname: '/somewhere',
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

【讨论】：