將 react-router-dom 從 4 升級到 5

Question

我正在升級 react/redux 應用程序中的幾個包，其中之一是 react-router-dom（從 4.x 到 5.x）。 我看到的文檔是 5.x 與 4 向后兼容，但我遇到了一個問題，即 context.router 沒有像在版本 4 中那樣被傳遞到 Route 組件的構造函數中。遺留代碼正在使用標簽而不是標簽。 在短期內，我試圖盡量減少更改的數量，並試圖保持標簽的使用，並打算在以后的某個時候切換到。

版本 5 控制台日志：

版本 4 控制台.log：

渲染包含 Router、Route 和 Switch 標簽的 function：

/**
 * 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>
    );
  };
}

Answer 1

通過使用 withRouter 組件，我能夠將歷史記錄和位置屬性附加到組件的道具上。 更多信息在這里： https://reactrouter.com/web/api/withRouter