react路由跳转与路由懒加载等(对照vue来说一说不同之处)

前言：

        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>;
}