Javascript 反应路由器 this.props.location
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42010053/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
react router this.props.location
提问by Андрей Гузюк
I need a help with react-router v2+
I have to change class of navbar when route changed
for example for route /profile classNamewill be "profile-header"I tried to use this.props.locationin navbar component but it shows undefined
我需要做出反应路由器V2 +我要改变类导航栏的时候改变路线例如用于帮助route /profile className将是"profile-header"我试图使用this.props.location在导航栏组件，但它显示了undefined
Hope your help
希望你的帮助
回答by szymonm
Your navbarcomponent (as you described it in your question) is probably not the route component, right? By route componentI mean the one that you use in your react-routerconfiguration that is loaded for a specific route.
您的navbar组件（如您在问题中所描述的）可能不是路由组件，对吗？通过route component我的意思是你在使用一个react-router被加载特定路由配置。
this.props.locationis accessible only on such route component, so you need to pass it down to your navbar.
this.props.location只能在此类上访问route component，因此您需要将其传递给您的navbar.
Let's take an example:
让我们举个例子：
Your router config:
您的路由器配置：
<Router>
<Route path="/" component={App}>
// ...
</Router
Route component App:
路由组件App：
class App extends React.Component{
// ...
render() {
return <Navbar location={this.props.location}/>
}
}
回答by varoons
There could be a scenario where you may not have access to props.location to pass to the nav component.
在某些情况下，您可能无法访问 props.location 以传递给导航组件。
Take for example - We had a header component in our project which was included in the routing switch to make it available to all routes.
举个例子 - 我们的项目中有一个 header 组件，它包含在路由开关中，使其可用于所有路由。
<Switch>
<Fragment>
<Header/>
<Route path='..' component={...}/>
<Route path='..' component={...}/>
</Fragment>
</Switch>
In the above scenario there is no way to pass the location data to the Header component.
在上述场景中，无法将位置数据传递给 Header 组件。
A better solution would be to us the withRouter HOC when a component is not being rendered by your router. You will still have access to the router properties history, match and location when you wrap it in the withRouter HOC:
当您的路由器未呈现组件时，更好的解决方案是使用 withRouter HOC。当您将它包装在 withRouter HOC 中时，您仍然可以访问路由器属性历史记录、匹配和位置：
import { withRouter } from 'react-router-dom'
....
....
export default withRouter(ThisComponent)
回答by Webars
react-router v4
反应路由器 v4
From documentation:
从文档：
<Route>componentproperty should be used, when you have an existing component.<Route>renderproperty takes an inline function, that returns html.A
<Route>with nopathwill always match.
<Route>component当您拥有现有组件时，应使用属性。<Route>render属性采用内联函数，返回 html。A
<Route>与 nopath将始终匹配。
Based on this, we can make a <Route>wrapper to any levelof your html structure. It will always be displayed and have access to the location object.
基于此，我们可以为您的 html 结构的任何级别制作<Route>包装器。它将始终显示并可以访问位置对象。
As per your request, if a user comes to /profilepage, the <header>will have profile-headerclass name.
根据您的要求，如果用户访问/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>
回答by Arthur Burgan
I couldn't solve it with the solutions given here and here is what worked for me:
我无法使用此处给出的解决方案解决它，这对我有用：
I imported historyinto my component and assigned history.location.pathnameto a variable which I later used for dynamic style manipulation.
我导入history到我的组件中并分配history.location.pathname给一个变量，我稍后将其用于动态样式操作。
回答by ETZE
In case you are rendering the component with pre-defined location.state values, first set your state with props.location.state then use your state data in your elements.
如果您使用预定义的 location.state 值渲染组件，请首先使用 props.location.state 设置您的状态，然后在您的元素中使用您的状态数据。
