[英]react-router getting this.props.location in child components
As I understand <Route path="/" component={App} />
will gives App
routing-related props like location
and params
.据我了解<Route path="/" component={App} />
将提供与App
路由相关的道具,如location
和params
。 If my App
component has many nested child components, how do I get the child component to have access to these props without:如果我的App
组件有许多嵌套的子组件,我如何让子组件在没有以下情况下访问这些道具:
I thought this.context.router
would have some information related to the routes, but this.context.router
seems to only have some functions to manipulate the routes.我以为this.context.router
会有一些与路由相关的信息,但是this.context.router
似乎只有一些操作路由的功能。
(Update) V5.1 & Hooks (Requires React >= 16.8) (更新) V5.1 & Hooks (需要 React >= 16.8)
You can useuseHistory
, useLocation
and useRouteMatch
in your component to get match
, history
and location
.您可以在组件中使用useHistory
、 useLocation
和useRouteMatch
来获取match
、 history
和location
。
const Child = () => {
const location = useLocation();
const history = useHistory();
const match = useRouteMatch("write-the-url-you-want-to-match-here");
return (
<div>{location.pathname}</div>
)
}
export default Child
(Update) V4 & V5 (更新) V4 & V5
You can usewithRouter
HOC in order to inject match
, history
and location
in your component props.你可以使用withRouter
HOC 来在你的组件 props 中注入match
、 history
和location
。
class Child extends React.Component {
static propTypes = {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
}
render() {
const { match, location, history } = this.props
return (
<div>{location.pathname}</div>
)
}
}
export default withRouter(Child)
(Update) V3 (更新) V3
You can use withRouter
HOC in order to inject router
, params
, location
, routes
in your component props.你可以使用withRouter
HOC 来在你的组件 props 中注入router
、 params
、 location
、 routes
。
class Child extends React.Component {
render() {
const { router, params, location, routes } = this.props
return (
<div>{location.pathname}</div>
)
}
}
export default withRouter(Child)
Original answer原答案
If you don't want to use the props, you can use the context as described in React Router documentation如果你不想使用 props,你可以使用React Router 文档中描述的上下文
First, you have to set up your childContextTypes
and getChildContext
首先,您必须设置childContextTypes
和getChildContext
class App extends React.Component{
getChildContext() {
return {
location: this.props.location
}
}
render() {
return <Child/>;
}
}
App.childContextTypes = {
location: React.PropTypes.object
}
Then, you will be able to access to the location object in your child components using the context like this然后,您将能够使用这样的上下文访问子组件中的位置对象
class Child extends React.Component{
render() {
return (
<div>{this.context.location.pathname}</div>
)
}
}
Child.contextTypes = {
location: React.PropTypes.object
}
If the above solution didn't work for you, you can use import { withRouter } from 'react-router-dom';
如果上述解决方案对您不起作用,您可以使用import { withRouter } from 'react-router-dom';
Using this you can export your child class as -使用它,您可以将您的子类导出为 -
class MyApp extends Component{
// your code
}
export default withRouter(MyApp);
And your class with Router -还有你的路由器课程 -
// your code
<Router>
...
<Route path="/myapp" component={MyApp} />
// or if you are sending additional fields
<Route path="/myapp" component={() =><MyApp process={...} />} />
<Router>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.