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