将 redux 与路由器结合使用

Question

我可以通过以下方式将 redux 与路由器一起使用吗？还有理由以这种方式使用它而不是使用路由器模块钩子吗？

import { createBrowserRouter ,RouterProvider} from "react-router-dom";
import HomePage from "./pages/HomePage";
import RootLayout from "./components/RootLayout";
import SearchPage from "./pages/SearchPage";
import WeatherPage from "./pages/WeatherPage";
import SettingsPage from "./pages/SettingsPage";
import {loader as HomePageLoader} from "./pages/HomePage";
import {useDispatch,useEffect} from "react-redux";


let router = "";
function App() {
const dispatch = useDispatch();
useEffect(()=>{
router = createBrowserRouter([
  {path:"/", element:<RootLayout/>,children:[
    {index:true,element:<HomePage/>, loader:() => {HomePageLoader(dispatch);}},
    {path:"search",element:<SearchPage/>},
    {path:"weather",element:<WeatherPage/>},
    {path:"settings",element:<SettingsPage/>}
  ]}
]);
},[]);
  return (
    <RouterProvider router={router}>
    </RouterProvider>
  );
}

export default App;

Answer 1

当然。但是，不要使用

useEffect

钩子来改变本地“全局”

router

变量，而应该使用

useMemo

钩子来记住

router

并关闭作用域中的

dispatch

函数。

此外，

useEffect

不是

react-redux

导出。

示例：

import { useMemo } from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { useDispatch } from "react-redux";
import HomePage, { loader as homePageLoader } from "./pages/HomePage";
import RootLayout from "./components/RootLayout";
import SearchPage from "./pages/SearchPage";
import WeatherPage from "./pages/WeatherPage";
import SettingsPage from "./pages/SettingsPage";

function App() {
  const dispatch = useDispatch();

  const router = useMemo(() => {
    return createBrowserRouter([
      {
        path:"/",
        element: <RootLayout />,
        children: [
          {
            index: true,
            element: <HomePage />,
            loader: homePageLoader(dispatch),
          }
          { path: "search", element: <SearchPage /> },
          { path: "weather", element: <WeatherPage /> },
          { path: "settings", element: <SettingsPage /> }
        ]
      }
    ]);
  }, []);

  return <RouterProvider router={router} />;
}

export default App;

确保

homePageLoader

是一个柯里化函数，这样它就可以传递

dispatch

函数并返回一个传递给 loader 属性的函数。

示例：

const loader = dispatch => ({ params, request }) => {
  // loader logic
};