javascript - 如何使用 React 路由器 4.2.2 的 withRouter 在 React 中获得正确的当前路径？

Question

所以我有一些文件:

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 访问路径名，但我必须自己登录才能使用事件类名。

我是不是漏掉了什么？

Answer 1

this.props.match 为您提供最接近的匹配父项的匹配参数，而不是匹配的子项中的路由，因为 App 处于顶层并匹配使用 path='/'，在 Navbar 中打印它总是会返回你

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

现在说在你的情况下 Characters 组件有一个子路径(注意，如果你在其中嵌套了路径，你不应该使用 exact 关键字)，你定义为

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

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

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

就 isExact 的变化值而言，它根据整个 url 是否与您的 Route url 匹配的事实返回您 true of false