代码之家 › 专栏 › 技术社区 › wobsoriano

如何使用React router 4.2.2的withRouter在React中获得正确的当前路径?

react-router reactjs javascript

wobsoriano · 技术社区 · 7 年前

所以我有一些文件:

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) line和我总是得到相同的路径和 activeClassName 甚至不起作用。

每当我更改位置时,输出总是:

{
    path: "/", 
    url: "/", 
    params: {â¦}, 
    isExact: false
}

isExact .

我现在可以使用访问路径名 this.props.location

2 回复 | 直到 7 年前

HoldOffHunger Lux 4 年前

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 true of false 基于整个url是否与您的路由url匹配这一事实

Evhz 7 年前

使用 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
  }
}