,可以通过以下步骤实现:
withRouter
高阶组件来包装组件。这将使得Header组件能够访问路由相关的属性。import { withRouter } from 'react-router-dom';
class Header extends React.Component {
// ...
}
export default withRouter(Header);
location
、match
和history
。class Header extends React.Component {
render() {
const { location } = this.props;
// 使用location属性获取当前路径
console.log(location.pathname);
return (
// ...
);
}
}
class Header extends React.Component {
render() {
const { location } = this.props;
return (
<div>
<ChildComponent location={location} />
</div>
);
}
}
class ChildComponent extends React.Component {
render() {
const { location } = this.props;
// 使用location属性获取当前路径
console.log(location.pathname);
return (
// ...
);
}
}
这样,你就可以在Header react路由器中获取子组件属性了。记得根据实际情况,适当调整代码以满足你的需求。
领取专属 10元无门槛券
手把手带您无忧上云