反应路由器 this.props.location 总是未定义答案

【问题标题】：React Router this.props.location is always Undefined反应路由器 this.props.location 总是未定义
【发布时间】：2019-12-10 20:26:45
【问题描述】：

我需要为当前路径的名称设置一个类名，例如“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>
      );
    }
}

【问题讨论】：

你怎么称呼这个组件？道具需要被某些东西设置在某个地方，它们并不神奇。
@F.P 我在我的 App 组件的返回中调用
那么你没有任何道具，因为你没有设置它们。使用useLocation() 钩子或withLocation() HOC
这能回答你的问题吗？ react-router-dom: getting props.location from within <BrowserRouter> component

标签： javascript reactjs react-router

【解决方案1】：

这里的问题是history、location 和 blah blah blah 已被 inyected 到 <Route /> 中的组件，但您正试图从创建路由器的同一组件访问它。因此，或者您在当前的父文件中创建了路由器，或者改为使用窗口对象

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

【讨论】：

【解决方案2】：

我认为您应该将路由器在层次结构中移到更高的位置，理想情况下移至呈现您的 App 组件的组件，如下所示：

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

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

【讨论】：