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>
	)
}
相关推荐
fuyongliang1238 小时前
Linux shell 脚本基础 003
java·服务器·前端
lypzcgf10 小时前
Coze源码分析-工作空间-项目开发-前端源码
前端·人工智能·typescript·系统架构·开源软件·react·安全架构
yuguo.im10 小时前
Chrome DevTools Performance 是优化前端性能的瑞士军刀
前端·javascript·性能优化·chrome devtools
FSHOW12 小时前
【独立开发日记】MQ端到端类型安全
前端·javascript·后端
老华带你飞13 小时前
社区互助|基于SSM+vue的社区互助平台的设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·小程序·毕设·社区互助平台
一支鱼13 小时前
前端使用次数最多的工具封装
前端·typescript·编程语言
GIS之路13 小时前
GDAL 简介
前端
前端工作日常13 小时前
单元测试与E2E测试中使用浏览器的原因及区别
前端·单元测试
chxii13 小时前
7.2elementplus的表单布局与模式
javascript·vue.js·elementui