6.react路由传参

params 传参

params 方式传参要求会多一些，需要我们在路由表配置的位置添加一个 参数占位。

路由表配置的位置添加参数占位

 {
        path:'/list',
        element:<LIST />,
		children: [
		    { path: 'details/:id/:title/:cont', element:<DETAILS /> }
		  ]
    },

路由传参

// App.js
import React, { useState } from 'react';
import {Link,Outlet} from 'react-router-dom'
function App() {
	const [messages] = useState([
		{id:'001',title:'消息1',cont:'锄禾日当午'},
		{id:'002',title:'消息2',cont:'汗滴禾下土'},
		{id:'003',title:'消息3',cont:'谁知盘中餐'},
		{id:'004',title:'消息4',cont:'粒粒皆辛苦'}
	]);
	return (
		<div>
			<ul>
				{
					messages.map((i)=>{
						return(
							<li key={i.id}>
								<Link to={`details/${i.id}/${i.title}/${i.cont}`}>{i.title}</Link>
							</li>
						)
					})
				}
			</ul>
			<hr/>
			<Outlet/>
		</div >
	);
}

export default App;

路由取参

在函数式组件里面我们要借助hooks的useParams来进行取参

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

export default function Details() {
	const {id,title,cont} = useParams()
    return (
        <div>
            <ul>
				<li>消息编号:{id}</li>
				<li>消息标题:{title}</li>
				<li>消息内容:{cont}</li>
			</ul>
        </div>
    )
}

---

search传参

路由传参

// App.js
import React, { useState } from 'react';
import {Link,Outlet} from 'react-router-dom'
function App() {
	const [messages] = useState([
		{id:'001',title:'消息1',cont:'锄禾日当午'},
		{id:'002',title:'消息2',cont:'汗滴禾下土'},
		{id:'003',title:'消息3',cont:'谁知盘中餐'},
		{id:'004',title:'消息4',cont:'粒粒皆辛苦'}
	]);
	return (
		<div>
			<ul>
				{
					messages.map((i)=>{
						return(
							<li key={i.id}>
								<Link to={`details?id=${i.id}&title=${i.title}&cont=${i.cont}`}>{i.title}</Link>
							</li>
						)
					})
				}
			</ul>
			<hr/>
			<Outlet/>
		</div >
	);
}

export default App;

路由取参

在函数式组件里面我们要借助hooks的useSearchParams来进行取参

import React from 'react';
import {useSearchParams} from 'react-router-dom'
export default function Details() {
	const [search,setSearch] = useSearchParams()
	const id = search.get('id')
	const title = search.get('title')
	const cont = search.get('cont')
    return (
        <div>
            <ul>
				<li>消息编号:{id}</li>
				<li>消息标题:{title}</li>
				<li>消息内容:{cont}</li>
			</ul>
        </div>
    )
}

---

state传参

路由传参

// App.js
import React, { useState } from 'react';
import {Link,Outlet} from 'react-router-dom'
function App() {
	const [messages] = useState([
		{id:'001',title:'消息1',cont:'锄禾日当午'},
		{id:'002',title:'消息2',cont:'汗滴禾下土'},
		{id:'003',title:'消息3',cont:'谁知盘中餐'},
		{id:'004',title:'消息4',cont:'粒粒皆辛苦'}
	]);
	return (
		<div>
			<ul>
				{
					messages.map((i)=>{
						return(
							<li key={i.id}>
								<Link to={`details`} state={{id:i.id,title:i.title,cont:i.cont}}>{i.title}</Link>
							</li>
						)
					})
				}
			</ul>
			<hr/>
			<Outlet/>
		</div >
	);
}

export default App;

路由取参

在函数式组件里面我们要借助hooks的useLocation来进行取参

import React from 'react';
import {useLocation} from 'react-router-dom'
export default function Details() {
	let state = useLocation().state
    return (
        <div>
            <ul>
				<li>消息编号:{state.id}</li>
				<li>消息标题:{state.title}</li>
				<li>消息内容:{state.cont}</li>
			</ul>
        </div>
    )
}