React Router this.props.location 总是未定义

Question

我需要将类名设置为当前路径的名称，例如“inventory”或“about”。 但是，当我尝试使用 this.props.location 时，它始终是未定义的。 有人可以向我解释为什么会这样吗？

class Header extends Component{
    render(){
      return(
        <Router>
          <div className={'header ' + this.props.location}>
            <div className="header-content">        
                <div className="header-right">
                <NavLink exact to="/">Home</NavLink>
                <NavLink to="/about">About</NavLink>
                <NavLink to="/inventory">Inventory</NavLink>
                </div>
            </div>
          </div>
          <div className="page-content">

            <Route exact path="/" component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/inventory" component={Inventory}/>
          </div>
        </Router>
      );
    }
}

Answer 1

这里的事情是history ， location和等等等等都被传递给了<Route />的组件，但是你正试图从创建路由器的同一个组件访问它。 所以或者你在当前的父文件中创建了路由器，或者使用 window 对象

 <div className={'header ' + window.location}>

Answer 2

我认为您应该在层次结构中将路由器移到更高的位置，最好是将您的 App 组件呈现为这样的组件：

<Router history={history}>
    <App />
</Router>

您当前正在尝试从 props 读取位置，但是因为您在同一个组件中渲染 Router，它无法将位置传递给 props，因此它将始终为空。 如果您通过路由器包装您的应用程序，那么您可以将位置道具向下传递到需要它的任何其他组件（例如标题）。