React 页面路由ReactRouter 路由跳转 参数传递 路由配置 嵌套路由

介绍

React Router 是一个用于 React 应用程序的标准库，它允许开发者在 React 应用中实现客户端路由功能，即可以通过 URL 导航到不同的视图而不需要重新加载页面。它的核心思想是通过保持应用程序状态的同时，更新视图并保持用户的浏览体验。

安装依赖

 npm i react-router-dom

项目结构

src/router/index.js

配置路由

import User from "../view/user";
import Login from "../view/login";import {createBrowserRouter} from "react-router-dom";const router = createBrowserRouter([{path: "/",element: <Login></Login>, // 默认路由重定向到 /login},,{path:'/login',element:<Login></Login>
},{   path:'/user',element:<User></User>}
,])export default router

导入路由

index.js

	import {RouterProvider} from "react-router-dom";
import router from "./router/index";const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><Provider store={store}><RouterProvider router={router}></RouterProvider></Provider></React.StrictMode>
);reportWebVitals();

---

路由跳转

声明式

import { Link } from "react-router-dom";<Link to="/user">跳转个人中心</Link>

编程式

import { useNavigate} from "react-router-dom";const nav =  useNavigate()<button onClick={()=>{nav('/user')}}>跳转</button>

---

路由传参

SearchPamas传递

 <button onClick={()=>{nav('/user?id=123')}}>跳转</button>

SearchPamas接收

import {useSearchParams} from "react-router-dom";const [params] =useSearchParams()
const id =params.get('id')

Pamas传递

<button onClick={()=>{nav('/user/123')}}>跳转</button>

路由占位

{   path:'/user/:id',element:<User></User>}

Pamas接收

import {useParams} from "react-router-dom";const params =useParams()
const id =params.id

---

嵌套路由

import {createBrowserRouter} from "react-router-dom";const router = createBrowserRouter([{path: "/",element: <Login></Login>, // 默认路由重定向到 /login},,{path:'/login',element:<Login></Login>
},{   path:'/user',element:<User></User>,children:[{path:'info',element:<Info></Info>}]}
,])export default router

import {Outlet} from "react-router-dom";const User=()=>{return <div>用户页<Outlet></Outlet></div>
}export default  User

默认二级路由
居然到/user自动跳转到Info组件

{   path:'/user',element:<User></User>,children:[{// path:'info',index:true,element:<Info></Info>}]}

---

404路由配置

路由配置项最后

{path:'*',element:<NotFound></NotFound>}

---

两种路由模式

分别是 HashRouter 和 BrowserRouter
HashRouter：aaa/#/bbb 不需要配置Nginx
BrowserRouter:aaa/bbb 需要配置Nginx

import {createBrowserRouter,createHashRouter} from "react-router-dom";

---

路由懒加载

可以让我们根据需要动态地加载路由对应的模块，而不是一开始就加载所有的模块。这能显著减小初始加载时的包体积，提高页面加载速度。

const Login =lazy(()=>import(   '../view/Login')){path: "/",element: <Suspense fallback={'加载中'}><Login></Login></Suspense>,},