react动态路由、嵌套路由、路由传参方式

React 路由一般使用目前最主流的 React Router（v6/v7），下面我会从动态路由、嵌套路由、路由传参三个方面详细讲解，并配上完整代码。

---

一、React Router 基础

安装

npm install react-router-dom

项目结构

src
├── App.jsx
├── main.jsx
├── router
│   └── index.jsx
├── pages
│   ├── Home.jsx
│   ├── User.jsx
│   ├── Detail.jsx
│   ├── Layout.jsx
│   └── NotFound.jsx

---

配置路由

// router/index.jsx

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

import Home from "../pages/Home";
import User from "../pages/User";

const router = createBrowserRouter([
    {
        path: "/",
        element: <Home />
    },
    {
        path: "/user",
        element: <User />
    }
])

export default router;

main.jsx

import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import router from "./router";

ReactDOM.createRoot(document.getElementById("root")).render(
    <RouterProvider router={router} />
);

---

二、动态路由

动态路由就是：

/user/1
/user/2
/user/100

实际上都是同一个页面。

配置

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

这里

:id

就是动态参数。

---

获取参数

使用

useParams()

import { useParams } from "react-router-dom";

function User(){

    const { id } = useParams();

    return (
        <>
            用户ID：

            {id}
        </>
    )
}

export default User;

访问

localhost:3000/user/100

输出

用户ID：100

---

多个动态参数

例如

/user/100/article/88

配置

{
    path:"/user/:uid/article/:aid",
    element:<Article/>
}

获取

const { uid, aid } = useParams();

console.log(uid);
console.log(aid);

输出

100

88

---

三、嵌套路由（重点）

例如后台系统

首页

系统管理
    用户管理
    菜单管理
    角色管理

商品管理
    商品列表
    商品分类

这种就是嵌套路由。

---

Layout页面

import { Outlet } from "react-router-dom";

function Layout(){

    return(

        <>
            <h1>后台系统</h1>

            <hr/>

            <Outlet/>

        </>

    )

}

export default Layout;

Outlet就是子路由出口。

相当于Vue中的

<router-view>

---

配置

{
    path:"/",
    element:<Layout/>,

    children:[

        {
            index:true,
            element:<Home/>
        },

        {
            path:"user",
            element:<User/>
        },

        {
            path:"article",
            element:<Article/>
        }

    ]
}

最终访问

/

显示

Layout
    Home

访问

/user

显示

Layout
    User

访问

/article

显示

Layout
    Article

---

多级嵌套

/

后台

    用户

        用户详情

配置

{
    path:"/",
    element:<Layout/>,

    children:[

        {
            path:"user",

            element:<User/>,

            children:[

                {

                    path:":id",

                    element:<Detail/>

                }

            ]

        }

    ]

}

User.jsx

import { Outlet } from "react-router-dom";

function User(){

    return(

        <>
            用户页面

            <Outlet/>

        </>

    )

}

访问

/user/100

页面

Layout

用户页面

详情100

---

四、路由传参（重点）

React Router 常见有 4 种方式。

---

第一种：params（路径参数）

URL

/user/100

配置

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

跳转

import { Link } from "react-router-dom";

<Link to="/user/100">
    查看
</Link>

或者

navigate("/user/100");

获取

const { id } = useParams();

优点

SEO友好

URL清晰

推荐

---

第二种：query（查询参数）

URL

/user?id=100&name=Tom

跳转

navigate("/user?id=100&name=Tom");

获取

import { useSearchParams } from "react-router-dom";

const [searchParams] = useSearchParams();

console.log(searchParams.get("id"));

console.log(searchParams.get("name"));

输出

100

Tom

---

也可以

navigate({

    pathname:"/user",

    search:"?id=100&name=Tom"

});

---

第三种：state（推荐页面跳转）

URL

/user

看不到参数。

跳转

navigate("/user",{

    state:{

        id:100,

        name:"Tom"

    }

});

获取

import { useLocation } from "react-router-dom";

const location = useLocation();

console.log(location.state);

输出

{

id:100,

name:"Tom"

}

优点

地址栏没有参数

可以传对象

方便

缺点

刷新丢失

---

第四种：URL 参数 + SearchParams（推荐）

例如

/user/100?tab=article&type=1

配置

path:"/user/:id"

获取

const { id } = useParams();

const [search] = useSearchParams();

console.log(id);

console.log(search.get("tab"));

console.log(search.get("type"));

输出

100

article

1

---

五、编程式导航

使用

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

跳转

navigate("/home");

带参数

navigate("/user/100");

Query

navigate("/user?id=1");

State

navigate("/user",{

    state:{

        id:1

    }

});

返回上一页

navigate(-1);

返回两页

navigate(-2);

前进

navigate(1);

---

六、Link 与 NavLink

<Link to="/home">首页</Link>

Link 只负责跳转。

NavLink 可以根据当前路由自动添加激活状态，适合导航菜单：

import { NavLink } from "react-router-dom";

<NavLink
  to="/home"
  className={({ isActive }) => (isActive ? "active" : "")}
>
  首页
</NavLink>

---

七、React Router v6/v7 推荐实践

在实际项目（如后台管理系统）中，推荐采用以下组合：

场景	推荐方式	示例
查看详情	params	/user/100
筛选、分页、搜索	query	/user?page=1&keyword=react
页面间临时传对象	state	navigate('/user', { state: { user } })
多级页面布局	children + Outlet	/system/user/list
页面导航	useNavigate	navigate('/home')
菜单导航	NavLink	自动高亮当前菜单

---

总结

• 动态路由 ：通过 :param 定义路径参数，使用 useParams() 获取，适合资源标识（如用户 ID、文章 ID）。

• 嵌套路由 ：使用 children 配置子路由，在父组件中通过 Outlet 渲染子页面，适合后台管理系统和多级布局。

• 路由传参：

  • params：URL 路径参数，适合详情页。

  • query：查询字符串，适合搜索、筛选、分页。

  • state：隐藏于地址栏，适合页面间临时传递对象，但刷新后会丢失。

  • params + query：兼顾资源定位和筛选条件，是复杂业务中常见的组合。