路由传值的三种形式（v5.x）

params参数
//路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link> //或 <Link to={{ pathname:'/demo/test/tom/18' }}>详情</Link>//注册路由(申明接管)：<Route path="/demo/test/:name/:age" component={Test}/>    //接管参数：this.props.match.params
search参数
//路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>//注册路由(无需申明，失常注册即可)：<Route path="/demo/test" component={Test}/>        //接管参数：this.props.location.search//备注：获取到的search是urlencoded编码字符串(例如: ?id=10&name=zhangsan)，须要借助query-string解析参数成对象
state参数
//路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>//注册路由(无需申明，失常注册即可)： <Route path="/demo/test" component={Test}/>    //接管参数：this.props.location.state//备注：刷新也能够保留住参数

路由传值的三种形式（v6.x）

params参数
//路由链接(携带参数)：<Link to={{ pathname:`/b/child1/${id}/${title}` }}>Child1</Link>//或 <Link  to={`/b/child1/${id}/${title}`}>Child1</Link> //注册路由(申明接管)：<Route path="/b/child1/:id/:title" component={Test}/>    //接管参数：import { useParams } from "react-router-dom";const params = useParams();//params参数 => {id: "01", title: "音讯1"}
search参数
//路由链接(携带参数)： <Link className="nav" to={`/b/child2?age=20&name=zhangsan`}>Child2</Link>//注册路由(无需申明，失常注册即可)：<Route path="/b/child2" component={Test}/>        //接管参数办法1：import { useLocation } from "react-router-dom";import qs from "query-string";const { search } = useLocation();//search参数 => {age: "20", name: "zhangsan"}//接管参数办法2：import { useSearchParams } from "react-router-dom";const [searchParams, setSearchParams] = useSearchParams();// console.log( searchParams.get("id")); // 12//备注：获取到的search是urlencoded编码字符串(例如: ?age=20&name=zhangsan)，须要借助query-string解析参数成对象
state参数
//通过Link的state属性传递参数 <Link     className="nav"     to={`/b/child2`}     state={{ id: 999, name: "i love merlin" }}  >    Child2</Link>//注册路由(无需申明，失常注册即可)：<Route path="/b/child2" component={Test}/>    //接管参数：import { useLocation } from "react-router-dom";const { state } = useLocation();//state参数 => {id: 999, name: "我是梅琳"}//备注：刷新也能够保留住参数

兄弟姐妹们，点波关注吧，一起分享乏味的技术！

掘金： https://juejin.cn/user/303430... 全副原创好文

CSDN： https://blog.csdn.net/qq_4275... 全副原创好文

简书：https://www.jianshu.com/u/460... 全副原创好文

segmentfault 思否： https://segmentfault.com/u/ja... 全副原创好文

博客园 ：https://www.cnblogs.com/Jason... 全副原创好文