Question

版本-

“反应路由器”：“ 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'路径。 / p>

AppComponent具有由 Route 组件定义为-

的一堆路由

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

另一个更新-

在this link上可以看到我所面临的问题，但解决方案-使用withRouter。也许我不是从正确的位置导入东西？ Something similar here

我正在使用带有preact (8.4.2)，preact-cli (v2.2.1)和preact-compact (3.18.4)的react-router和react-router-dom。我不确定这是否是根本原因吗？开箱即用，不支持反应路由器吗？

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

Answer 1

尝试将 AppContainerComponent 与您的 withRouter 一起包装，如下所示：

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

Answer 2

我设法通过创建自定义withRouter hoc来解决此问题，该路由使用一个组件来呈现该组件并将其包装在Router组件内。路由器组件具有我需要的道具（历史记录，位置），并将它们传递给正在渲染的组件，从而完全消除了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);

withConnectr with connect在v5.0.0中无法正常工作吗？

2 个答案: