React Router this.props.location始终未定义

Posted 2023-01-14

我需要将类名称设置为当前路径的名称，例如“清单”或“关于”。但是，当我尝试使用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>
      );
    

答案

这里的问题是history，location和等等等等已被集成到<Route />中的组件上，但是您正试图从创建路由器的同一组件中访问它。因此，或者您在当前的父文件中创建了路由器，或者使用window对象]

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