最新版本react 18 react-router-dom6 reduxjs/toolkit redux-perseist 以及中间件配置

在router.js中定义好路由以及懒加载

import React from "react"
import { Navigate } from "react-router-dom"
const Login = React.lazy(() => import("@/pages/Login"))
const Layout = React.lazy(() => import("@/layouts"))
const Home = React.lazy(() => import("@/pages/Home"))
const Question = React.lazy(() => import("@/pages/Question"))
const Video = React.lazy(() => import("@/pages/Video"))
const Profile = React.lazy(() => import("@/pages/Profile"))
const ProfileEdit = React.lazy(() => import("@/pages/Profile/Edit"))
const Chat = React.lazy(() => import("@/pages/Profile/Chat"))
const router = [
  // 一级路由
  {
    path: "/",
    element: <Navigate to="/login"></Navigate>,
    // 二级路由
    children: "",
    id: "1",
  },
  {
    path: "login",
    element: <Login></Login>,
    // 二级路由
    children: "",
    id: "2",
  },
  {
    path: "profile/chat",
    element: <Chat></Chat>,
    // 二级路由
    children: "",
    id: "212",
  },
  {
    path: "home/*",
    element: <Layout></Layout>,
    // 二级路由
    children: [
      {
        path: "",
        element: <Home></Home>,
        // 二级路由
        children: "",
        id: "21",
      },
      {
        path: "question",
        element: <Question></Question>,
        // 二级路由
        children: "",
        id: "22",
      },
      {
        path: "video",
        element: <Video></Video>,
        // 二级路由
        children: "",
        id: "23",
      },
      {
        path: "profile",
        element: <Profile></Profile>,
        // 二级路由
        children: "",
        id: "24",
      },
    ],
    id: "3",
  },
  {
    path: "profile/edit",
    element: <ProfileEdit></ProfileEdit>,
    // 二级路由
    children: "",
    id: "5",
  },
  {
    path: "*",
    element: (
      <main style={{ padding: "1rem" }}>
        <p>There's nothing here!</p>
      </main>
    ),
    // 二级路由
    children: "",
    id: "4",
  },
]
export default router

在index.js中引入持久化存储persit以及redux

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import "@assets/styles/index.scss"
import { store, persistor } from "@/store/index"
import { Provider } from "react-redux"
import { PersistGate } from "redux-persist/integration/react"
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>
)

在app.js中引入路由组件

import "@/app.scss"
import { Suspense } from "react"
import {
  BrowserRouter as Router,
  Routes,
  // Link,
  Route,
} from "react-router-dom"
import React from "react"
import router from "@/utils/router"
//broweRouter是history路由模式，routes包裹route替代原来的switch
function App() {
  return (
    <Router>
      {/* 跟容器 */}
      <div className="App"></div>
      <Suspense fallback={<div>loading</div>}>
        <Routes>
          {router.map((item) => (
            // 一级路由
            <Route key={item.id} path={item.path} element={item.element}>
              {/* 二级路由 */}
              {item.children &&
                item.children.length > 0 &&
                item.children.map((ite) => (
                  <Route
                    key={ite.id}
                    path={ite.path}
                    element={ite.element}
                  ></Route>
                ))}
            </Route>
          ))}
        </Routes>
      </Suspense>
    </Router>
  )
}

export default App

注意二级路由显示位置请在页面使用outlet组件~~~~~~~~~~~~~~~~~~~~~~~~

在store.js中配置redux以及redux-persit

import thunk from "redux-thunk"
import { configureStore } from "@reduxjs/toolkit"
import reducer from "@/store/reducer/index.js"
import { composeWithDevTools } from "redux-devtools-extension"
import { getTokenInfo } from "@/utils/storage"
import storage from "redux-persist/lib/storage"
import { persistStore, persistReducer } from "redux-persist"
const persistConfig = {
  key: "root",
  storage,
}
const persistedReducer = persistReducer(persistConfig, reducer)
const preloadedState = {
  login: getTokenInfo(),
}
// 对redux进行配置
export const store = configureStore({
  reducer: persistedReducer,
  middleware: [thunk],
  devTools: composeWithDevTools(),
  preloadedState,
})
export const persistor = persistStore(store)

有用请点赞，具体为啥这么写请自行查阅文档，谢谢~