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);