从父组件访问路由信息可以通过以下几种方式实现:
import { withRouter } from 'react-router-dom';
class ParentComponent extends React.Component {
render() {
const { location, match, history } = this.props;
// 可以通过location获取当前路径等信息
// 可以通过match获取路由参数
// 可以通过history进行路由跳转等操作
return (
// 父组件的内容
);
}
}
export default withRouter(ParentComponent);
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const RouterContext = React.createContext();
class ParentComponent extends React.Component {
render() {
return (
<Router>
<Switch>
<Route path="/" render={() => (
<RouterContext.Provider value={this.props}>
<ChildComponent />
</RouterContext.Provider>
)} />
</Switch>
</Router>
);
}
}
class ChildComponent extends React.Component {
render() {
return (
<RouterContext.Consumer>
{routerProps => (
// 可以通过routerProps获取路由信息
// 包括当前路径、参数等
// 进行相应的操作
)}
</RouterContext.Consumer>
);
}
}
export default ParentComponent;
以上是两种常用的方法,可以根据具体情况选择适合的方式来从父组件访问路由信息。
领取专属 10元无门槛券
手把手带您无忧上云