React V6 函数组件路由传参

1.search传参

路由信息传参

{/* search传参 */}
<Link to='/Text1?id=1&content="react程序"'>text1</Link>

search传参不需要在路由route上进行声明

接收参数        使用路由中的 useSearchParams

import {useSearchParams} from 'react-router-dom'

const [search]=useSearchParams()
const id=search.get('id')
const content=search.get('content')
console.log(id,content);

2.params传参

路由传参  

<Link to={`/Text2/${id}/${title}`}>text2</Link>

路由route声明

<Route path='/Text2/:id/:title'  element={<Text2></Text2>}>Text2</Route>

接收参数     使用路由中的 useParams

import { useParams } from 'react-router-dom'

const parmas=useParams()
const {id,title}=parmas
console.log(id,title);

3.state传参

参数传输

<Link to={'/Text3'} state={{id:id,title:title}}>Text3</Link>

state传参不需要在路由route上进行声明

参数接收       使用路由中的 useLocation

import { useLocation } from 'react-router-dom'

const parmas=useLocation()
const {id,title}=parmas.state
console.log(id,title);