第一章 :react-router-dom 简述
第二章 :v5 和 v6 区别
第三章 :简单的使用
react-router-dom v6 距离更新也是有段时间了,相比于v5 来说,使用起来更加的方便,体积也更小,赶紧跟着我快速上手吧
提示:以下是本篇文章正文内容,下面案例可供参考
演示代码所使用的是这个版本┗|`O′|┛ 嗷~~
npm install react-router-dom --save
// 或
yarn add react-router-dom
简单的路由大致需要引用这些
import { Route, Routes, BrowserRouter, Navigate } from 'react-router-dom'
BrowserRouter v6 的使用和v5 并无区别
Routes 代替 v5 的 Switch
Route 属性有所变化 去掉了原来的 component render 由element属性实现
Navigate 代替 v5 的 Redirect
path 路径可以省略 "/" 和 上一级的路径拼接,加上也不会影响
import { Route, Routes, BrowserRouter, Navigate } from 'react-router-dom'
import Home from '../page/Home'
import Order from '../page/Order'
import User from '../page/User'
{/* 一级路由 */}
}>
{/* 二级路由 */}
}>
}>
{/* 重定向 */}
}>
这里有个注意的点二级路由需要在对应的一级路由添加一个路由出口
v6 新增的api Outlet 直接解决这个问题
感觉非常Nice !!!
例如:
import React from 'react';
import { Outlet } from 'react-router-dom'
const Home = () => {
return (
home
{/* 路由出口 */}
);
}
export default Home;
重定向问题也很好的处理 ,目前本人只发现这一种方法实现重定向 QAQ
例如 :
}>
v6 仅支持2种占位符:动态:id
样式参数和 *
通配符
}>
}>
}>
import { Link } from 'react-router-dom'
子路由跳转
正常跳转
如果是往当前路由下的二级路由跳转则不需要 "/"
同级路由或其他路由,路径需要写全
import { NavLink } from 'react-router-dom';
子路由跳转
正常跳转
NavLink 是 Link 的一个特定版本,可以添加特定的属性,样式 && 逻辑,和以前版本一样不过多介绍
useNavigate 替代以前的 history
import React from 'react';
import { useNavigate } from 'react-router-dom'
const Home = () => {
const navigate = useNavigate()
return (
home
navigate('/order')}>
普普通通的跳转
navigate('/order', { state: { a: 123 } })}>
还能带个参数的跳转
);
}
export default Home;
传参就要接收参数
import React from 'react';
import { useLocation } from 'react-router-dom'
const Order = () => {
const location = useLocation()
console.log(location);
return (
);
}
export default Order;
获取地址栏参数
1.如果是这么跳转路由,那么就要用到这个啦 (⊙o⊙)
我传的id 是 1
navigate(`/home/user/${id}`)}>拼接地址栏传参大法
2.参数来了来了
import React from 'react';
import { useParams } from 'react-router-dom';
const User = () => {
const params = useParams()
console.log(params);
return (
);
}
export default User;
来个简单的递归
这是路由表
import Home from '../page/Home'
import Order from '../page/Order'
import User from '../page/User'
const pages = [
{
path: 'home',
element: ,
name: 'home',
children: [
{
path: 'user/:id',
element: ,
name: 'user'
}
]
},
{
path: 'order',
element: ,
name: 'order'
},
{
from : '/',
to : '/home'
}
]
export default pages
来个组件
import pages from "./page"
import { Route, Routes, BrowserRouter, Navigate } from 'react-router-dom'
const Router = () => {
const mapRouter = (routes) => (
routes.map((item, idx) => (
item.path
?
{ /* 如果有子路由 , 递归渲染 */
item.children && mapRouter(item.children)
}
: } key={idx}>
))
)
return (
{mapRouter(pages)}
)
}
export default Router
发现原来的说法可能有些人看不懂,修改了一下,详细++,不过这次是额外添加了ts
要啥传啥就没问题了吧
差不多就到这了... 有问题欢迎评论指点
总的来说这个版本我很喜欢,我所提及的都是很基本的,简单易上手