前言：

????????react路由跳轉與路由懶加載等

路由懶加載：

使用?@loadable/component 插件來實現

安裝：

npm i @loadable/component

具體使用：

1、引入

@loadable/component

2、正常封裝的地方

const Home=Loadable(()=>import('./views/Home.jsx'));

也可以寫回調函數，比如加個loading，封裝的echarts/index.jsx

封裝的jsx文件里面，用懶加載獲取多個不同的界面，然后統一封裝統一使用

import loadable from "@loadable/component";
import { Spin } from "antd";const loaddingCom = (<Spinstyle={{display: "flex",alignItems: "center",justifyContent: "center",minHeight: 20,fontSize: 14,}}tip="組件加載中...."/>
);const Line = loadable(() => import("./line"), { fallback: loaddingCom });
const Bar = loadable(() => import("./bar"), { fallback: loaddingCom });
const Pie = loadable(() => import("./pie"), { fallback: loaddingCom });export { Line, Bar, Pie };

3、具體使用的地方

const Home=Loadable(()=>import('./views/Home.jsx'));
<Route path='/home' component={Home}></Route>

如果是像上面封裝的多個路由，然后輸送，那么具體使用就是

import { Line as LineEchart } from "@/components/echarts";
<LineEchart option={visitorOpt} style={echartStyle} />

路由的跳轉方法：

1、使用?<Link>?組件，

類似 HTML 的?<a>?標簽，但不會導致頁面刷新

import { Link } from "react-router-dom";function HomePage() {return (<div><h1>首頁</h1>{/* 跳轉到 /about 頁面 */}<Link to="/about">關于我們</Link></div>);
}

2、使用?useNavigate?Hook （類似 router.push）

import { useNavigate } from "react-router-dom";const navigate = useNavigate();
navigate("/dashboard");

3、使用?<Navigate>?組件

import { Navigate } from "react-router-dom";function PrivateRoute({ isLoggedIn, children }) {if (!isLoggedIn) {// 如果未登錄，跳轉到 /loginreturn <Navigate to="/login" replace />;}return children;
}

4、路由跳轉傳參

1）路徑上攜帶

// 路由配置
<Route path="/user/:id" element={<UserPage />} />// 跳轉方式
navigate("/user/123");// 在目標頁面獲取參數
import { useParams } from "react-router-dom";
function UserPage() {const { id } = useParams(); // id = "123"return <div>User ID: {id}</div>;
}

2）？后拼接參數? ??類似：router.push的query傳參

// 跳轉方式
navigate("/search?query=react");// 在目標頁面獲取查詢參數
import { useSearchParams } from "react-router-dom";
function SearchPage() {const [searchParams] = useSearchParams();const query = searchParams.get("query"); // "react"return <div>Search Query: {query}</div>;
}

3）State 傳參（不會顯示在 URL） 類似：router.push的params傳參

// 跳轉方式
navigate("/profile", { state: { username: "John" } });// 在目標頁面獲取 state
import { useLocation } from "react-router-dom";
function ProfilePage() {const location = useLocation();const { username } = location.state; // "John"return <div>Username: {username}</div>;
}

4）返回上一頁，類似 router.go(-1)

import { useNavigate } from "react-router-dom";function BackButton() {const navigate = useNavigate(); //navigate(-1)return <button onClick={() => navigate(-1)}>返回</button>;
}