React函数组件路由传参整理

1.useSearchParams

useSearchParams是路由参数？后面数据的接收。

跳转按钮代码

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

const navigate = useNavigate()；

<button onClick={() => {navigate("/index?id=1&&name=zs")}}>主页</button>

接收参数页面代码

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

const [params] = useSearchParams();

console.log(params.get("id")); //接收id
console.log(params.get("name")); //接收name

2.useParams

useParams是动态页面路由参数的接收，常用来获取详情页id。

配置动态页面

{ name: "/list", path: "/list/:id", element: <List /> },

跳转按钮代码

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

const navigate = useNavigate()；

<button onClick={() => {navigate("/list/1")}}>文章1</button>
<button onClick={() => {navigate("/list/2")}}>文章2</button>
<button onClick={() => {navigate("/list/3")}}>文章3</button>
<button onClick={() => {navigate("/list/4")}}>文章4</button>

动态页面接收id

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

const params=useParams()

console.log(params);

3.useLocation

useLocation是接收navigate中携带的state，search信息。

跳转按钮

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

const navigate = useNavigate();  

<button
        onClick={() => {
          navigate("/list/1?id=1&&name=zs", {
            state: {
              name: "zs",
              age: 18,
            },
          });
        }}
      >
        文章1
 </button>

接收页面

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

const location = useLocation();

const searchParams = new URLSearchParams(location.search);

console.log(location.state); //获取state数据

console.log(searchParams.get("id")); //获取？后面的值