React-dom 17版本以上 useHistory 更新为useNavigate如何传值

一、准备前提

   "react": "^17.0.2",
   "react-dom": "^17.0.2",
   "react-router": "^6.0.2",
   "react-router-dom": "^6.0.2",
   "react-scripts": "4.0.3",

二、函数组件如何进行路由传参

1. 组件跳转并传值

• 导入

import { useNavigate } from ‘react-router-dom’;

• 使用

const navigate = useNavigate();

2. 点击事件中使用
   

   组件“/machine”为已经定义好的路由,state负责传值state:{参数:值}

3. 获取值

导入

import { useLocation } from ‘react-router-dom’;

使用

 let location = useLocation()
 console.log(location.state)