开发者问题收集

react-router-dom v5 中 BrowserRouter 未定义路由器上下文

2019-08-28
1313

存在一个问题,当使用 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 中是否有我遗漏的新功能?

2个回答

我猜是因为 React Router 5 使用了新的 context API,与旧 API 不同。你可以在这里找到一些信息: react router v5 以及如何访问它的一些要点 访问 context api

但是为什么你需要以这种方式访问​​ context?也许这个问题可以用另一种方式解决。

Sergii Vorobei
2019-08-28

从 v4 升级到 v5 后,我遇到了莫名其妙的故障,因此遇到了这个问题。因此,将 @sergii-vorobei 的答案添加到任何人的答案中,可能会有所帮助。

我的问题是因为生成路由的包依赖项之一是将 react-router 捆绑在其可分发包中。由于 react-router 依赖于单例来提供正确的上下文,因此主应用程序路由器和路由的单例不匹配,导致路由从未从主应用程序接收上下文。

iamogbz
2021-01-16