react-router-dom路由傳參的方式

路由傳值的三種方式（v5.x）
1.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

2.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解析參數成對象

3.state參數
//路由鏈接(攜帶參數)：

<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>詳情</Link>

//注冊路由(無需聲明，正常注冊即可)：

 <Route path="/demo/test" component={Test}/>

//接收參數：
this.props.location.state

//備注：刷新也可以保留住參數

路由傳值的三種方式（v6.x）

1.params參數
//路由鏈接(攜帶參數)：

<Link to={{ pathname:`/b/child1/${id}/${title}` }}>Child1</Link>

//或 <Link to={/b/child1/${id}/${title}}>Child1

//注冊路由(聲明接收)：

<Route path="/b/child1/:id/:title" component={Test}/>

//接收參數：

import { useParams } from "react-router-dom";
const params = useParams();
//params參數 => {id: "01", title: "消息1"}

2.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解析參數成對象

3.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: "我是梅琳"}

//備注：刷新也可以保留住參數