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")); //获取?后面的值