使用 React Router 中的 CreateBrowserRouter 和 Redux 存储

Question

尝试在React博客项目中实现Redux和React Router，其中我从API获取数据并存储在Redux中；但是，它没有被渲染，也没有给出错误

我在我的 App.jsx 中尝试了以下代码

const getRouter=(store)=>{
return (createBrowserRouter(createRoutesFromElements(
      
      <Route path="/" element={<Layout />}>
        <Route  index element={<PostList />} errorElement={<Error />} loader={(arg)=>{arg.post=store.getState().posts}}/>
        <Route  path='/posts' element={<PostForm />}>
          <Route  />
        </Route>
        <Route path="*" element={<NotFound />} />
      </Route>
       
    )))
}
export default function App() {
    <Provider store={store}>
    
      <RouterProvider  router={getRouter(store)}/>
    
    </Provider>
  }
   

Answer 1

使用 createBrowserRouter 和 createRoutesFromElements：这些函数不是标准的 React Router 函数。通常，您可以使用react-router-dom中的BrowserRouter并直接使用JSX定义路由，而不需要像createRoutesFromElements这样的辅助函数。

const App = () => {
  return (
    <Provider store={store}>
      <Router>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<PostList />} />
            <Route path="/posts" element={<PostForm />} />
            <Route path="*" element={<NotFound />} />
          </Route>
        </Routes>
      </Router>
    </Provider>
  );
};

export default App;