目录 第一章 ：react-router-dom 简述
第二章 ：v5 和 v6 区别
第三章 ：简单的使用
前言 react-router-dom v6 距离更新也是有段时间了，相比于v5 来说，使用起来更加的方便，体积也更小，赶紧跟着我快速上手吧
提示：以下是本篇文章正文内容，下面案例可供参考
一、react-router-dom 简述 演示代码所使用的是这个版本┗|｀O′|┛ 嗷~~
文章图片
1.下载
npm install react-router-dom --save
// 或 yarn add react-router-dom2. 路由方面 简单的路由大致需要引用这些
import { Route, Routes, BrowserRouter, Navigate } from 'react-router-dom'二、v5 和 v6 区别 1.路由 BrowserRouterv6 的使用和v5 并无区别
Routes代替v5 的 Switch
Route属性有所变化去掉了原来的 componentrender由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 新增的apiOutlet 直接解决这个问题
感觉非常Nice ！！！
例如：
import React from 'react';
import { Outlet } from 'react-router-dom'
const Home = () => {
return (home
{/* 路由出口 */}
重定向问题也很好的处理 ，目前本人只发现这一种方法实现重定向QAQ
例如 ：
v6 仅支持2种占位符：动态:
id样式参数和*通配符}> }>
}> 1.路由跳转----Link
import { Link } from 'react-router-dom'子路由跳转
正常跳转如果是往当前路由下的二级路由跳转则不需要"/"
同级路由或其他路由，路径需要写全
2.路由跳转----NavLink
import { NavLink } from 'react-router-dom';
子路由跳转
正常跳转 NavLink 是 Link 的一个特定版本，可以添加特定的属性，样式 && 逻辑，和以前版本一样不过多介绍
3.useNavigate 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 } })}>
还能带个参数的跳转
4.useLocation 传参就要接收参数
import React from 'react';
import { useLocation } from 'react-router-dom'const Order = () => {
const location = useLocation()
console.log(location);
return ();
}export default Order;
文章图片
4.useParams 获取地址栏参数
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: 来个组件
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最后一点路由守卫，可以使用高阶组件在Route 里面实现
发现原来的说法可能有些人看不懂，修改了一下，详细++，不过这次是额外添加了ts
文章图片
文章图片
要啥传啥就没问题了吧
差不多就到这了...有问题欢迎评论指点
总结 总的来说这个版本我很喜欢,我所提及的都是很基本的，简单易上手
【react|react-router-dom v6 使用】
推荐阅读
- React|React 组件三大属性
- React|react-router-dom V6
- reactjs|react组件实例对象的三大核心（state,props,refs）
- React|React组件三大核心属性(二)——props
- react|React 组件与组件实例的三大属性
- react技术栈及全家桶|react-router-dom v6 版本使用内容详解
- #|React组件实例的三大属性
- react.js|react-router-dom V6的配置使用
- react|react 路由（react-router-dom 的使用）