您的navbar组件（如您在问题中所描述的）可能不是路由组件，对吗？通过route component我的意思是你在使用一个react-router被加载特定路由配置。

this.props.location只能在此类上访问route component，因此您需要将其传递给您的navbar.

让我们举个例子：

您的路由器配置：

<Router>
    <Route path="/" component={App}>
    // ...
</Router

路由组件App：

class App extends React.Component{
  // ...
  render() {
    return <Navbar location={this.props.location}/>
  }
}

在某些情况下，您可能无法访问 props.location 以传递给导航组件。

举个例子 - 我们的项目中有一个 header 组件，它包含在路由开关中，使其可用于所有路由。

<Switch>
  <Fragment>
    <Header/>
    <Route path='..' component={...}/>
    <Route path='..' component={...}/>
  </Fragment>
</Switch>

在上述场景中，无法将位置数据传递给 Header 组件。

当您的路由器未呈现组件时，更好的解决方案是使用 withRouter HOC。当您将它包装在 withRouter HOC 中时，您仍然可以访问路由器属性历史记录、匹配和位置：

import { withRouter } from 'react-router-dom'
.... 
....
export default withRouter(ThisComponent)

react-router v4

从文档：

1. <Route> component当您拥有现有组件时，应使用属性。<Route> render属性采用内联函数，返回 html。

2. A<Route>与 nopath将始终匹配。

基于此，我们可以为您的 html 结构的任何级别制作<Route>包装器。它将始终显示并可以访问位置对象。

根据您的要求，如果用户访问/profile页面，<header>将具有profile-header类名。

<Router>
    <Route render={({ location }) =>
        <header className={location.pathname.replace(/\//g, '') + '-header'}>
            // header content...
        </header>

        <div id="content"></div>

        <footer></footer>
    } />
</Router>

我无法使用此处给出的解决方案解决它，这对我有用：

我导入history到我的组件中并分配history.location.pathname给一个变量，我稍后将其用于动态样式操作。