在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)
有用请点赞,具体为啥这么写请自行查阅文档,谢谢~