要检查react-router是否在上下文中,可以使用react-router
提供的withRouter
高阶组件。
首先,确保已经安装了react-router-dom
包。
然后,在需要检查的组件中,引入withRouter
函数,并将组件作为参数传递给withRouter
函数,例如:
import React from 'react';
import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
// ...
}
export default withRouter(MyComponent);
withRouter
函数将返回一个新的组件,该组件将具有history
、location
和match
属性,这些属性是由react-router
提供的上下文中的路由信息。通过访问这些属性,我们可以判断react-router
是否在上下文中。
在上面的例子中,MyComponent
组件将具有history
、location
和match
属性,您可以使用这些属性来检查react-router
的存在。例如,您可以使用location
属性来获取当前的URL路径:
import React from 'react';
import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
componentDidMount() {
const { location } = this.props;
console.log(location.pathname);
}
render() {
// ...
}
}
export default withRouter(MyComponent);
在上面的示例中,componentDidMount
生命周期方法中的location.pathname
将打印出当前URL的路径。
请注意,要正确使用withRouter
函数,组件必须是react-router
的Router
组件的子组件。
领取专属 10元无门槛券
手把手带您无忧上云