时间戳

首页 > 解决方案 > 带连接的 withRouter 在 v5.0.0 中不起作用？

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

问题描述

版本 -

“反应路由器”：“5.0.0”，“反应路由器-dom”：“5.0.0”

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

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

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

如果我删除 withRouter HOC，它可以工作。

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

我将 withRouter 导入为-

import { withRouter } from 'react-router';

不确定是什么问题。

注意 - 我已经浏览了这个链接，它讨论了 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={} 
/>

另一个更新——

遇到这个链接，它准确地谈到了我面临的问题，但解决方案 - 使用 withRouter。也许我没有从正确的位置导入一些东西？这里有类似的东西

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

我已经设置了这个链接来演示这个问题。（issue_example 分支）

标签： reactjsreact-reduxreact-routerreact-router-dompreact

解决方案

尝试用您的withRouter 仅包装 AppContainerComponent ，如下所示：

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

推荐阅读