将 react-router-dom 从 4 升级到 5答案

【问题标题】：Upgrading react-router-dom from 4 to 5将 react-router-dom 从 4 升级到 5
【发布时间】：2020-07-15 14:50:10
【问题描述】：

我正在升级 react/redux 应用程序中的几个包，其中之一是 react-router-dom（从 4.x 到 5.x）。我看到的文档是 5.x 与 4 向后兼容，但我遇到了一个问题，即 context.router 没有像在版本 4 中那样被传递到 Route 组件的构造函数中。遗留代码使用标签而不是标签。在短期内，我会尽量减少更改的数量，并尝试保持标签的使用，并打算在以后的某个时候切换到。

版本 5 控制台日志：

版本 4 控制台.log：

包含Router、Route和Switch标签的渲染函数：

/**
 * Top level Container
 */
class App extends React.Component {
  /**
   * Render the entire app
   * @return {jsx} result in jsx format
  */
  render() {
    return (
      <ConfigProvider locale={enUS}>
        <Router history={history}>
          <div>
            <Header />
            <Notifications />
            <Switch>
              <Route exact path={home} component={requireAuth(Groups)} />
              <Route exact path={groups} component={requireAuth(Groups)} />
              <Route path={addcard} component={requireAuth(AddCard)} />
              <Route path={db} component={requireAuth(DbTbl)} />
              <Route path={cards} component={requireAuth(Cards)} />
              <Route path={card} component={requireAuth(EditCard)} />
              <Route path={test} component={requireAuth(Test)} />
              <Route path={users} component={requireAuth(Users)} />
              <Route path={signin} component={authenticatedUser(Signin)} />
              <Route path={signup} component={authenticatedUser(Signup)} />
              <Route path={responses} component={requireAuth(Responses)} />
              <Route path={study} component={requireAuth(Study)} />
              <Route component={NoMatch} />
            </Switch>
          </div>
        </Router>
      </ConfigProvider>
    );
  };
}

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

通过使用 withRouter 组件，我能够将历史和位置属性附加到组件的道具上。更多信息在这里： https://reactrouter.com/web/api/withRouter

【讨论】：