react-router-dom 路由传参和获取参数以和详细解剖

react-router-dom v6.3

安装路由

npm react-router-dom

路由容器

	<BrowserRouter>history模式</BrowserRouter>
	<HashRouter>hash模式</HashRouter>
	注：以上两个容器最好放到最顶层的组件之外
	

Route 组件

	<Route path="" element={标签名}></Route>
	注：element 必须以标签的形式去引用

Routes 组件(相当于老版本的switch)

	要求Route 必须包括在Routes组件里面
	如：<Routes>
		<Route path="" element={标签名}></Route>
	</Routes>

route中的 exact 属性

	在V6版本中默认就是完整匹配        
	如果你想模糊匹配：在路径后面添加/*
	如：<Route path="/index/*" element={<Index></Index>}></Route>

Link 类似a标签

	<link to="/index"></Link>

NavLink 类似a标签

	和link的区别是navLink 有激活状态(通过 className 和 style )
	<NavLink to="/index" className = {({isActive})=>{
		return isActive?'active':''
	}}></NavLink>
	<NavLink to="/index" style = {({isActive})=>{
		return isActive?{
			color:'red'
		}:''
	}}></NavLink>

Navigate 重定向

	<Navigate />
	使用：<Route path="/"  element={<Navigate to="/login"/>}/> push的形式
		：<Route path="/" replace  element={<Navigate to="/login"/>}/> replace的形式
		
		push 和 replace 
		注： push 有历史记录可以后退
			replace 没有历史记录不可以后退

嵌套路由

	现在只有相对路径了

关键的来了

useRoutes

	import {useRoutes} from 'react-router-dom'
	const getRoutes = ()=>{
		retrun useRoutes([
			{
				element:<Index/>
				path:'/index'
			},
			{
				element:<Login/>,
				path:'/login'
			},
			{
				//子路由
				path:'/about',
				element:<About/>,
				children:[
					//这里只能使用相对路径
					{
						path:'',
						element:<JoinUs/>
					},
					{
						path:'joinusa',
						element:<JoinUsa/>
					}
				]
			}
		])
	}
	使用的时候
	<GetRoutes/> 只能按照标签的格式使用

编程式导航 useNavigate 来实现

	
	import {useRoutes} from 'react-router-dom'
	const navigate = useNavigate();
	navigate('/login');//这个是push的方式跳转
	navigate('/login',{replace:true});//这个是replace的方式跳转
	navigate(-1);//回退一步  -2回退两步
	
	携带参数
	//携带 search 参数
		navigate('/login?a=1');
	//携带 params 参数
		navigate('/login/${id}/${name}');
	//携带 state 参数  不显示url上面 但是刷新会丢失数据
		navigate('/login',{state:{a:1,b:1}})

获取路由传参

	useParams  //获取路由传参	
		const params = useParams(); console.log(params); 

	useSearchParams //获取url传参
		const [search,setSearch] = useSearchParams();
		console.log(search.get('id'));  

	useLocation  //获取state传参
		const {state:{id}} = useLocation();
		console.log(id)

这篇好文章是转载于：学新通技术网