React Router 6 获取路由参数

一、params参数

传递params参数

路由链接(携带参数):<Link to='/demo/test/18'}>详情</Link>

注册路由(声明接收):<Route path="/demo/test/:id" component={Test}/>

获取params参数

javascript 复制代码
import React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';
import User from './pages/User.jsx'

function ProfilePage() {
  // 获取URL中携带过来的params参数,"/demo/test/:id"
  let { id } = useParams();
  
  return <>{id}</>
}

二、search参数

传递search参数

路山链接(携带参数):<Link to='/demo/test?name=tom&age=18'}>详情</Link>

注册路由(无需声明,正常注册即可):<Route path="/demo/test" component={Test}/>

获取search参数

javascript 复制代码
import React from 'react'
import {useSearchParams} from 'react-router-dom'

export default function Detail() {
	const [search,setSearch] = useSearchParams()
	const name= search.get('name')
	const age= search.get('age')
	return (
		<ul>
			<li>
				<button onClick={()=>setSearch('name=哈哈&age=11')}>点我更新一下收到的search参数</button>
			</li>
			<li>名字:{name}</li>
			<li>年龄:{age}</li>
		</ul>
	)
}

三、state参数

传递state参数

路由锋按(携带参数):<Link to={{path:'/demo/test',state:{name:'tom',age:18}}}>详悄</Link>

注册路由(无需声明,正常注册即可):<Route path="/demo/test"component={Test}/>

获取state参数

javascript 复制代码
import React from 'react'
import {useLocation} from 'react-router-dom'

export default function Detail() {
	const {state} = useLocation()
	console.log('@',x)
  // x就是location对象: 
	/*
		{
      hash: "",
      key: "ah9nv6sz",
      pathname: "/login",
      search: "?name=tom&age=18",
      state: {name: 'tom', age: 18}
    }
	*/
	return (
		<ul>
			<li>名字:{state.name}</li>
			<li>年龄:{state.age}</li>
		</ul>
	)
}
相关推荐
云枫晖9 小时前
手写Promise-静态方法reoslve和reject
前端·javascript
浮幻云月9 小时前
让 Vue 动画如德芙般丝滑!这个 FLIP 动画组件绝了!
前端·javascript
吃饺子不吃馅10 小时前
揭秘 X6 核心概念:Graph、Node、Edge 与 View
前端·javascript·svg
qwy71522925816310 小时前
Vue中的Provide/Inject如何实现动态数据
前端·javascript·vue.js
艾小码10 小时前
告别重复代码!React自定义Hook让逻辑复用如此简单
前端·javascript·react.js
yoyoma10 小时前
react-infinite-scroll-component 使用注意事项
前端
快乐是一切10 小时前
PDF文件的交叉引用表(xref)与 trailer
前端
Never_Satisfied10 小时前
在JavaScript / HTML中,让<audio>元素中的多个<source>标签连续播放
开发语言·javascript·html
emma羊羊10 小时前
【CSRF】防御
前端·网络安全·csrf
Paddy哥10 小时前
html调起exe程序
前端·html