React-router v7 (中)

路由传参

参数传递

React-router 一共有三种方式进行参数传递，参数传递指的是在路由跳转时，将参数传递给目标路由。

Query方式

Query的方式就是使用 ? 来传递参数，例如：

bash
 体验AI代码助手
 代码解读
复制代码
#多个参数用 & 连接
/user?name=小满zs&age=18

跳转方式：

tsx
 体验AI代码助手
 代码解读
复制代码
<NavLink  to="/about?id=123">About</NavLink> //1. NavLink 跳转
<Link to="/about?id=123">About</Link> //2. Link 跳转
import { useNavigate } from 'react-router'
const navigate = useNavigate()
navigate('/about?id=123') //3. useNavigate 跳转

获取参数：

tsx
 体验AI代码助手
 代码解读
复制代码
//1. 获取参数
import { useSearchParams } from 'react-router'
const [searchParams, setSearchParams] = useSearchParams()
console.log(searchParams.get('id')) //获取id参数

//2. 获取参数
import { useLocation } from 'react-router'
const { search } = useLocation()
console.log(search) //获取search参数 ?id=123

Params方式

Params的方式就是使用 :[name] 来传递参数，例如：

bash
 体验AI代码助手
 代码解读
复制代码
/user/:id

跳转方式：

tsx
 体验AI代码助手
 代码解读
复制代码
<NavLink to="/user/123">User</NavLink> //1. NavLink 跳转
<Link to="/user/123">User</Link> //2. Link 跳转
import { useNavigate } from 'react-router'
const navigate = useNavigate()
navigate('/user/123') //3. useNavigate 跳转

获取参数：

tsx
 体验AI代码助手
 代码解读
复制代码
import { useParams } from 'react-router'
const { id } = useParams()
console.log(id) //获取id参数

State方式

state在URL中不显示，但是可以传递参数，例如：

bash
 体验AI代码助手
 代码解读
复制代码
/user

跳转方式：

tsx
 体验AI代码助手
 代码解读
复制代码
<Link to="/user" state={{ name: '小满zs', age: 18 }}>User</Link> //1. Link 跳转
<NavLink to="/user" state={{ name: '小满zs', age: 18 }}>User</NavLink> //2. NavLink 跳转
import { useNavigate } from 'react-router'
const navigate = useNavigate()
navigate('/user', { state: { name: '小满zs', age: 18 } }) //3. useNavigate 跳转

获取参数：

tsx
 体验AI代码助手
 代码解读
复制代码
import { useLocation } from 'react-router'
const { state } = useLocation()
console.log(state) //获取state参数
console.log(state.name) //获取name参数
console.log(state.age) //获取age参数

总结

React Router 提供了三种参数传递方式，各有特点：

1. Params 方式 (/user/:id)

• 适用于：传递必要的路径参数（如ID）
• 特点：符合 RESTful 规范，刷新不丢失
• 限制：只能传字符串，参数显示在URL中

2. Query 方式 (/user?name=xiaoman)

• 适用于：传递可选的查询参数
• 特点：灵活多变，支持多参数
• 限制：URL可能较长，参数公开可见

3. State 方式

• 适用于：传递复杂数据结构
• 特点：支持任意类型数据，参数不显示在URL
• 限制：刷新可能丢失，不利于分享

选择建议：必要参数用 Params，筛选条件用 Query，临时数据用 State。

懒加载

什么是懒加载

懒加载是一种优化技术，用于延迟加载组件，直到需要时才加载。这样可以减少初始加载时间，提高页面性能。

懒加载的实现

通过在路由对象中使用 lazy 属性来实现懒加载。

ts
 体验AI代码助手
 代码解读
复制代码
import { createBrowserRouter } from 'react-router';
const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); // 模拟异步请求
const router = createBrowserRouter([
    {
        Component: Layout,
            {
                path: 'about',
                lazy: async () => {
                    await sleep(2000); // 模拟异步请求
                    const Component = await import('../pages/About'); // 异步导入组件
                    console.log(Component);
                    return {
                        Component: Component.default,
                    }
                }
            },
        ],
    },
]);

当切换到 about 路由时，才会进行加载

如果配置了 loader 则每次都会进入loading状态，如果没有配置 loader 则只执行一次。

体验优化

例如 about 是一个懒加载的组件，在切换到 about 路由时，展示的还是上一个路由的组件，直到懒加载的组件加载完成，才会展示新的组件，这样用户会感觉页面卡顿，用户体验不好。

使用状态优化useNavigation

速查文档useNavigation

• src/layout/Content/index.tsx

ts
 体验AI代码助手
 代码解读
复制代码
import { Outlet, useNavigation } from 'react-router';
import { Alert, Spin } from 'antd';
export default function Content() {
    const navigation = useNavigation();
    console.log(navigation.state);
    const isLoading = navigation.state === 'loading';
    return <div>
        {isLoading ? <Spin size='large' tip='loading...'  >
            <Alert description="小满zs小满zs小满zs小满zs小满zs小满zs小满zs小满zsv"   message="加载中" type='info' />
        </Spin> : <Outlet />
        }
    </div>
}

性能优化

使用懒加载打包后，会把懒加载的组件打包成一个独立的文件，从而减小主包的大小，等用到的时候才会进行加载。