react-router-dom v5 中 BrowserRouter 未定义路由器上下文
存在一个问题,当使用
react-router-dom
4.0.0
时,以下代码可以成功记录上下文,但当使用
5.0.1
时,会记录
undefined
。
const { BrowserRouter, Route, Switch } = window.ReactRouterDOM;
const PropTypes = window.PropTypes;
class Main extends React.Component {
static contextTypes = {
router: PropTypes.object.isRequired,
}
render() {
console.log("this.context.router");
console.log(this.context);
console.log(this.context.router);
return <div>Main</div>;
}
}
const App = () => (
<BrowserRouter>
<div>
<Switch>
<Route path="/" component={Main} />
</Switch>
</div>
</BrowserRouter>
);
ReactDOM.render(<App />, document.getElementById('app'));
使用:
4.0.0
(有效):
https://jsfiddle.net/2shm7awn/3/
使用:
5.0.1
(无效):
https://jsfiddle.net/2shm7awn/2/
使用
5.0.1
和所有其他最新软件包(
react
/
react-dom
@
16.9.0
- 也不起作用):
https://jsfiddle.net/2shm7awn/5/
我已经做了大量搜索,即使我错过了文档中的一些明显内容,我认为这对将来的某些内容也会有所帮助。
版本 5 中是否有我遗漏的新功能?
我猜是因为 React Router 5 使用了新的 context API,与旧 API 不同。你可以在这里找到一些信息: react router v5 以及如何访问它的一些要点 访问 context api
但是为什么你需要以这种方式访问​​ context?也许这个问题可以用另一种方式解决。
从 v4 升级到 v5 后,我遇到了莫名其妙的故障,因此遇到了这个问题。因此,将 @sergii-vorobei 的答案添加到任何人的答案中,可能会有所帮助。
我的问题是因为生成路由的包依赖项之一是将 react-router 捆绑在其可分发包中。由于 react-router 依赖于单例来提供正确的上下文,因此主应用程序路由器和路由的单例不匹配,导致路由从未从主应用程序接收上下文。