Question

我需要使用react-router v2 +的帮助当路线改变时我必须改变导航栏的类别例如route /profile className将为"profile-header" 我尝试在导航栏组件中使用this.props.location，但它显示undefined

希望你的帮助

Answer 1

您的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}/>
  }
}

Answer 2

反应路由器v4

来自documentation：

  当您有现有组件时，应使用

SET FILTER TO YEAR(LastCall) = 2019 SELECT * FROM TableName WHERE YEAR(LastCall) = 2019属性。 <Route> component属性具有一个内联函数，该函数返回html。



没有<Route>的{{1}}将始终匹配。

基于此，我们可以为您的html结构的任何级别创建一个render包装器。它将始终显示并可以访问位置对象。

根据您的请求，如果用户进入<Route>页，则path将具有<Route>类名。

/profile

Answer 3

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

例如-在我们的项目中有一个标头组件，该组件包含在路由交换机中，以使其可用于所有路由。

<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)

Answer 4

我无法使用此处提供的解决方案来解决它，这对我来说是有效的：

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

Answer 5

如果要使用预定义的location.state值渲染组件，请首先使用props.location.state设置状态，然后在元素中使用状态数据。

反应路由器this.props.location

5 个答案: