useNavigate、useParams、useLocation 用法useNavigate、useParams、us

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

三者之间的关系

Hook	作用	示例
`useNavigate`	编程式导航	`navigate("/home")`
`useParams`	获取路径参数（Path Params）	`/user/:id` → `id`
`useLocation`	获取当前路由信息	`pathname`、`search`、`hash`、`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 更方便。