useNavigate、useParams、useLocation 用法

useNavigate、useParams、useLocation是 React Router v6 中最常用的三个 Hooks，它们只能在函数组件中使用。

一、useNavigate（页面跳转）

作用：

用来进行页面跳转，相当于以前 React Router v5 的history.push()和history.replace()。

1、导入

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

2、基本使用

import { useNavigate } from "react-router-dom"; function Home() { const navigate = useNavigate(); const goUser = () => { navigate("/user"); }; return ( <button onClick={goUser}> 去用户页 </button> ); }

点击以后：

当前页面 ↓ /user

3、传递参数（query）

例如：

/user?id=100&name=Tom

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

或者

navigate({ pathname: "/user", search: "?id=100&name=Tom" });

4、传递 state（推荐页面间数据传递）

navigate("/user", { state: { id: 100, name: "Tom" } });

目标页面：

const location = useLocation(); console.log(location.state);

输出

{ id:100, name:"Tom" }

5、replace 跳转

不会留下历史记录。

navigate("/login", { replace: true });

相当于

history.replace()

适用于：

登录成功

login ↓ home

按返回键不会回到 login。

6、前进后退

后退

navigate(-1);

前进

navigate(1);

回退两页

navigate(-2);

例如：

A ↓ B ↓ C navigate(-1) 返回 B

useNavigate 总结

navigate("/home") navigate("/home?id=1") navigate("/home",{ state:{} }) navigate("/home",{ replace:true }) navigate(-1)

二、useParams（获取动态路由参数）

作用：

获取 URL 中的动态参数。

1、配置路由

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

这里

:id

就是动态参数。

例如：

/user/100

100 就是 id。

2、获取参数

import { useParams } from "react-router-dom"; function User() { const params = useParams(); console.log(params); return <div>用户页面</div>; }

输出

{ id:"100" }

3、多个参数

路由：

<Route path="/user/:id/:name" element={<User />} />

地址：

/user/100/Tom

获取

const params = useParams(); console.log(params);

输出

{ id:"100", name:"Tom" }

4、TS 写法

const { id } = useParams<{ id: string; }>();

或者（React Router v6 更推荐）

const { id } = useParams<{ id: string }>();

useParams 总结

路由：

/user/:id/:name

地址：

/user/100/Tom

获取：

const { id, name } = useParams();

三、useLocation（获取当前路由信息）

作用：

获取当前 URL、query、hash、state 等信息。

1、导入

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

2、获取 location

const location = useLocation(); console.log(location);

例如：

http://localhost:3000/user?id=100#abc

输出：

{ pathname:"/user", search:"?id=100", hash:"#abc", state:null, key:"xxx" }

3、pathname

获取路径

const location = useLocation(); console.log(location.pathname);

输出

/user

4、search（Query 参数）

例如：

/user?id=100&name=Tom

获取

const location = useLocation(); console.log(location.search);

输出

?id=100&name=Tom

这是字符串。

需要解析。

5、解析 Query 参数

推荐使用浏览器内置的URLSearchParams：

const location = useLocation(); const searchParams = new URLSearchParams(location.search); console.log(searchParams.get("id")); console.log(searchParams.get("name"));

输出：

100 Tom

也可以直接使用 React Router 提供的useSearchParams（更推荐）：

import { useSearchParams } from "react-router-dom"; const [searchParams] = useSearchParams(); console.log(searchParams.get("id")); console.log(searchParams.get("name"));

6、获取 state

上一页

navigate("/user",{ state:{ id:100, name:"Tom" } })

目标页

const location = useLocation(); console.log(location.state);

输出

{ id:100, name:"Tom" }

7、hash

/user#abc

获取

console.log(location.hash);

输出

#abc

useLocation 总结

const location = useLocation(); location.pathname location.search location.hash location.state

三者之间的关系

完整示例

路由配置

import { BrowserRouter, Routes, Route } from "react-router-dom"; <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/user/:id" element={<User />} /> </Routes> </BrowserRouter>;

Home.tsx

import { useNavigate } from "react-router-dom"; export default function Home() { const navigate = useNavigate(); const goUser = () => { navigate("/user/100?role=admin", { state: { name: "Tom", }, }); }; return <button onClick={goUser}>进入用户页</button>; }

User.tsx

import { useLocation, useParams, useSearchParams, } from "react-router-dom"; export default function User() { // 路径参数 const { id } = useParams<{ id: string }>(); // Query 参数 const [searchParams] = useSearchParams(); const role = searchParams.get("role"); // 路由信息 const location = useLocation(); return ( <div> <h2>用户页面</h2> <p>id：{id}</p> <p>role：{role}</p> <p>state：{JSON.stringify(location.state)}</p> <p>pathname：{location.pathname}</p> </div> ); }

访问流程：

Home │ │ navigate("/user/100?role=admin", { │ state: { name: "Tom" } │ }) ▼ URL: /user/100?role=admin useParams() → { id: "100" } useSearchParams() → role = "admin" useLocation() → { pathname: "/user/100", search: "?role=admin", state: { name: "Tom" } }

如何选择？

• 需要跳转页面：使用useNavigate

• 需要获取/user/:id这类路径参数：使用useParams

• 需要获取当前路径、state、hash等完整路由信息：使用useLocation

• 需要读取或修改查询参数（?key=value）：优先使用useSearchParams，比手动解析location.search更方便。