从父组件访问路由信息可以通过以下几种方式实现:
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;
以上是两种常用的方法,可以根据具体情况选择适合的方式来从父组件访问路由信息。
云+社区沙龙online [腾讯云中间件]
腾讯云数智驱动中小企业转型升级系列活动
北极星训练营
北极星训练营
腾讯云GAME-TECH游戏开发者技术沙龙
云+社区技术沙龙[第6期]
Elastic 中国开发者大会
领取专属 10元无门槛券
手把手带您无忧上云