带连接的 withRouter 在 v5.0.0 中不起作用？

Posted 2023-02-16

技术标签:

【中文标题】带连接的 withRouter 在 v5.0.0 中不起作用？【英文标题】：withRouter with connect is not working in v5.0.0? 【发布时间】：2019-09-24 19:36:15 【问题描述】：

版本 -

“反应路由器”：“5.0.0”， "react-router-dom": "5.0.0"

在我的应用容器组件中，我使用 withRouter 来访问位置和历史道具。我像使用它一样 -

export default withRouter(connect(mapStateToProps)(AppContainerComponent));

结果是，我得到一个空白页。没有错误，只是一个空白页。

如果我删除 withRouter HOC，它会起作用。

此外，它曾经在 v4.0.0-beta.8 中工作。

我将 withRouter 导入为 -

import  withRouter  from 'react-router';

不确定是什么问题。

注意 - 我已经通过 this link 讨论了 shouldCOmponentUpdate 方法如何不考虑上下文更改（react-router 现在使用），它建议使用 'withRouter' HOC 包装组件，但是它本身对我不起作用。

更新 -

以下是我正在使用的路由路径 -

index.js -

<Provider store=store>
      <BrowserRouter>
        <AppContainerComponent />
      </BrowserRouter>
    </Provider>

appcontainer.component（它的 redux 连接）呈现以下组件 -

<AppRoutes isAuthenticated=isAuthenticated />

appRoutes.component.ts - 该组件呈现 'UnauthenticatedRoute' 和 'AuthenticatedRoute' 自定义 HOC -

<UnauthenticatedRoute
      path="/"
      exact
      component=SignupComponent
      isAuthenticated=isAuthenticated />

<AuthenticatedRoute
      path="/app"
      exact
      component=AppComponent
      isAuthenticated=isAuthenticated />

'UnauthenticatedRoute' 和 'AuthenticatedRoute' HOC 将在用户成功通过身份验证时渲染传递的组件，否则它将使用 react-router 的 Redirect 组件重定向到 '/signup' 路径。

AppComponent 有一堆由 Route 组件定义的路由 -

<Route exact 
       path="/path1"
       render= 
/>

另一个更新 -

遇到this link，它准确地谈到了我面临的问题，但解决方案 - 使用 withRouter。也许我没有从正确的位置导入一些东西？ Something similar here

我将 react-router 和 react-router-dom 与 preact (8.4.2)、preact-cli (v2.2.1) 和 preact-compact (3.18.4) 一起使用。我不确定这是否是根本原因？ react-router 不支持开箱即用的 preact 吗？

我已设置this link 来演示问题。（issue_example 分支）

【问题讨论】：

你试过import withRouter from 'react-router-dom';吗？你能发布路线路径吗？是的，我已经尝试从 react-router-dom 导入它。其实我跟着这个 - reacttraining.com/react-router/web/api/withRouter 。我不明白“路由路径”，你能解释一下吗？我的意思是必须为此组件定义路由路径（可能在 App.js 或其他文件中），指定要渲染的组件，如：<Router><Route path="/:id" component=Child /></Router> 实际上，我无法弄清楚为什么它在 4.4.0-beta.8 但在下一个版本 v5 中没有。 0.0. 这个你查了吗，好像是这样的：github.com/ReactTraining/react-router/issues/4671 【参考方案1】：

试着用你的 withRouter 只包装 AppContainerComponent，像这样：

export default connect(mapStateToProps)(withRouter(AppContainerComponent));

【讨论】：

不。这不起作用。实际上这个链接 - reacttraining.com/react-router/web/api/withRouter 明确表示不要像那样使用 withRouter hoc。【参考方案2】：

我设法通过创建自定义 withRouter hoc 解决了这个问题，它接受一个组件来呈现并将该组件包装在一个路由器组件中。 Router 组件有我需要的 props（历史、位置），我将它们传递给我正在渲染的组件，完全消除了 RRD 的 withRouter 的使用。

import  Route  from 'react-router-dom';

const withRouter = (ConnectedComponent) => 
  const witRouterComponent = (props) => (
    <Route render=routeProps =>
      <ConnectedComponent ...routeProps ...props /> />
  );
  return witRouterComponent;
;

export default withRouter;

在（例如 AppContainerComponent）中使用它

const ConnectedComponent = connect(mapStateToProps)(AppContainerComponent);

export default withRouter(ConnectedComponent);