reactjs 使用路由器更换组件不工作React-Router-V6

lokaqttq 于 2022-12-22 发布在 React

关注(0)|答案(1)|浏览(128)

我正在升级react路由器到react路由器v6。在最新版本中withRouter不再被支持。我实现了这个 Package 器作为替换。

export const withRouter = Component => {
  const Wrapper = props => {
    const navigate = useNavigate();

    return <Component navigate={navigate} {...props} />;
  };

  return Wrapper;
};

我是这样实现的

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(Layout)
);

基本上， Package 器与应用程序中的原始withRouter位于同一位置。
目前我收到错误

Uncaught Error: [Wrapper] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

我用<Route navigate={navigate} {...props}/>交换了<Component navigate={navigate} {...props}/>，但是我仍然得到同样的错误。谢谢！

reactjs

来源：https://stackoverflow.com/questions/74885940/withrouter-replace-component-does-not-work-react-router-v6

1条答案

按热度按时间

5n0oy7gb1#

Wrapper是返回的组件，您似乎试图将其呈现为Routes组件中的路由组件，但正如错误所指出的，这是一个不变式违规。
给定：

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(Layout)
);

您似乎试图在Routes组件中直接呈现此组件，类似于：

<Routes>
  <DecoratedLayout> // <-- Not a Route component!!
    <Route ....... />
    ...

  </DecoratedLayout>
</Routes>

但这是无效的。在本例中，DecoratedLayout组件应呈现为 Package 组件（* 呈现children prop ）或布局路线（ 呈现Outlet组件 *）。
作为 Package 组件：

<Routes>
  <Route 
    path="...."
    element={(
      <DecoratedLayout>
        ...
      </DecoratedLayout>
    )}
  />
  ...
</Routes>

作为布局布线：

<Routes>
  <Route element={<DecoratedLayout />}>
    <Route ....... />
    ...
  </Route>
  ...
</Routes>

赞(0）回复(0）举报 2022-12-22

我来回答

reactjs 使用路由器更换组件不工作React-Router-V6

1条答案

相关问题

热门标签

最新问答