react之useNavigate() 三种的传参方法和接收方法

1.直接传入路径字符串：

传参

const navigate = useNavigate();
navigate('/destination?name=xxx');

 接收：

const [searchParams] = useSearchParams();

// 使用 URLSearchParams 提供的方法来获取参数
const name = searchParams.get('name');

2.使用 Location State:

传参

const navigate = useNavigate();
navigate('/destination', { state: { a:10 } });

 接收：

const {state} = useLocation();

state里面就是{ a:10 }

3.使用查询字符串：

传参

const navigate = useNavigate();
navigate('/destination/12');

需要对路由进行配置
path:'/destination:/id'

 接收：

const { id } = useParams();
// 现在 id 变量包含了通过路由参数传递的参数值