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为您提供最匹配父级的匹配参数，而不是匹配的子级中的Route，因为App位于顶级并且与path='/'匹配，将其打印在Navbar将永远归你

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

现在说在你的情况下Characters组件有一个subRoute（请注意，如果你有嵌套的Routes，你不应该使用exact关键字），你定义为

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的值，它会根据整个网址与您的路线网址匹配的事实返回true of false

Answer 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
  }
}

如何使用带路由器的反应路由器4.2.2在React中获取正确的当前路径？

2 个答案: