如何给 React 一个提供者？<Route>

Question

我想在Provider和其他商店的帮助下向我的React Routes提供一些数据。

<Router>
<Routes>
<Provider store={store}>
<Route path="/" element={HomePage} />
</Provider>
<Provider store={store2}>
<Route path="/about" element={AboutPage} />
</Provider>
<Provider store={store3}>
<Route path="/review" element={ReviewPage} />
</Provider>
</Routes>
</Router>

但当我运行应用程序时，它会给我下一个错误：[Provider] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>。

如何在我的Routes中使用我的提供商？

Answer 1

您需要更改结构，并将您的Router封装在每个Provider中，因为组件中不能有除Route之外的任何其他内容。

同样在React Router Dom V6中，您需要渲染元素，例如<Homepage />

代码可以是这样的：

<>
<Provider store={store}>
<Router>
<Routes>
<Route path="/" element={<HomePage />} />
</Routes>
</Router>
</Provider>
<Provider store={store2}>
<Router>
<Routes>
<Route path="/about" element={<AboutPage />} />
</Routes>
</Router>
</Provider>
</>

---

最新更新是渲染eact路由器dom V6中的"元素"，正如@Ergis在评论中指出的

Answer 2

要解决此问题，请将路由中需要的所有元素包装到Provider中。

`  
<Routes>
<Route path="/" element={<Provider> <HomePage/> </Provider>} />
<Route path="/review" element={<Provider> <ReviewPage/> </Provider>} />
<Route path="/about" element={<Provider> <AboutPage/> </Provider>} />
</Routes>
`