相对v5的变化

Routes

1.Route需要用Routes包裹
2.组件用element表示
3.路由内有嵌套需要加*

<Routes><Route path='/datatable/*'element={<Datatable/>} /><Route path='/schedule/*'element={<Datatable/>}/>
</Routes>

同时，子级路由的path前缀不需要加上父级的path，/为根目录。

Navigate

1.相比v5，删除Redirect改为Navigate，作用同为重定向
2.useNavigate代替userHistory和withRouter 作用为编程式导航
不管是否为路由组件，都可以使用

 <Route path="/" element={<Navigate to="/datatable" />} />

const navigate = useNavigate();   //注意要写在函数组件内，否则会报错
navigate(-1); //后退
navigate('/',
{replace: //默认为false,state:
})

userParams

获取路由上传的的参数

path="home:/id:/data:"
to="home/1/'abcd'";
const {id,data} = userParams()

userRouters

注册路由表
可以把所有路由写在一个文件下

 const element=useRoutes([{path:"home",element:<HomePage/>},])

使用{element}，作用等同于RoutesRoute等组件…

Outlet

占位组件，为嵌套路由占位

<Outlet/>   //可以使用useOutlet查看嵌套路由对象

React router v6写法总结相关推荐

React Router v6 的路由切换实现方式
首先需要先引入路由库,并配置好路由规则. 在React Router v6中,可以使用<Routes>和<Route>组件来定义路由规则. 例如: # 使用<Routes ...
在React中使用React Router v6
具有多个视图的单页应用程序 (SPA) 需要有一种路由机制,以便在这些不同视图之间导航,而无需刷新整个网页.这可以通过使用诸如React Router之类的路由库来处理. 在本教程中,让我们看看如何使 ...
React Router V6 新特性
安装 npm install react-router-dom@6 配置路由 import { render } from "react-dom"; import {Browser ...
React Router v6
https://juejin.cn/post/7025418839454122015#heading-7
React Router 升级 v6: Redirect 重定向替代方案
React Router 升级 v6: Redirect 重定向替代方案文章目录 React Router 升级 v6: Redirect 重定向替代方案 React Router v6 Redir ...
react router
目录前言核心 1.内置的组件 2.内置的路由器组件 3.History 对象 4.Location 对象 5.react router 的安装包一.React-Router v1 1.一些概念 ...
React Router 黑笔记？
我横竖睡不着,字里行间看出2个字.... 首先,在该项目开始之前,还请大家能够先下载一个项目脚手架.本教程基于该脚手架进行开发先看文件大致架构渲染 Route (index.js 启动的compo ...
React Router 使用教程
真正学会 React 是一个漫长的过程. 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系.想要发挥它的威力,整个技术栈都要配合它改造.你要学习一整套解决方案,从后端到前端,都是全新的做法. ...
react router v4 简介
最近使用react router 遇到一个问题:当对某个路由添加参数的时候/list/:app 这列路由,点击这个路由以后再点击其他路由,location地址就追加到后面,问不是replace. /l ...
React Router学习
React Router教程本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...

React router v6写法总结