React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React  useNavigate、useParams、useLocation

React Router v6中useNavigate、useParams、useLocation用法小结

作者：光影少年

useNavigate、useParams、useLocation是React Router v6中最常用的三个 Hooks,本文就来详细的介绍一下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

三者之间的关系

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

如何选择？

到此这篇关于React Router v6中useNavigate、useParams、useLocation用法小结的文章就介绍到这了,更多相关React useNavigate、useParams、useLocation内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文