react 路由6与路由5的区别

最新推荐文章于 2023-08-14 16:59:53 发布
最新推荐文章于 2023-08-14 16:59:53 发布
阅读量740 收藏 4
点赞数 3
分类专栏： 笔记 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50736511/article/details/124465981
版权

1.基本使用上的不同

1.去除switch，替换成Routers（不加会报错）

2.conponment替换成element

3.去除了redirect了
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.新增路由表

和vue的路由差不多，可以单开一个页面来配置路由表，在页面上element配置显示的位置

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这样就和下面的差不多
在这里插入图片描述
也可以配置路由的子组件

路径不需要加 /
在这里插入图片描述
指定子路由显示的位置

在这里插入图片描述

3.配置参数

1.params参数

使用模板字符串拼接变量

在这里插入图片描述
在路由表中接收参数

在这里插入图片描述
接收参数

在这里插入图片描述
2.配置search参数

在这里插入图片描述
接收到search参数

在这里插入图片描述
3.配置state参数

在这里插入图片描述
接收参数
在这里插入图片描述

参数保存在这里
在这里插入图片描述

4.编程式路由

在这里插入图片描述
当编程式路由需要传参时，需要传递参数

在这里插入图片描述
当需要跳转时配置navigate
在这里插入图片描述
需要后退前进的时候
在这里插入图片描述

万事胜意sy
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
ReactRouterDom-v5&v6用法与异同
奇舞周刊
05-25 1041
本文作者系360奇舞团前端开发工程师简介：React Router Dom是React.js中用于实现路由功能的常用库。在React应用中，路由可以帮助我们管理页面之间的导航和状态，并实现动态加载组件。本文将深入探讨React Router Dom的两个主要版本：V5和V6，并介绍它们的用法和异同点。v5用法React Router Dom的V5版本是在React Router的基础上构建的。它是...
React路由鉴权的实现方法
10-16
主要介绍了React路由鉴权的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【react 中router v6 与 v5 区别】
Clover ‘s Blog
10-23 478
路由
React Router以及版本6与版本5的区别
m0_59129742的博客
04-16 1419
内置组件的变化：移除<Switch/>，新增<Routes>等 语法的变化：component={组件名}变为element={组件名}等 新增多个hook：useParams、useNavigate、useMatch等 react代码插件片段：ES7+React/Redux/React-Native snippets 规则： <HashRouter>与<BrowserRouter> 两者作用一样，需要用于包裹整个应用 HashRouter修改的
React-router v5和v6的区别对比
weixin_57935165的博客
02-09 3260
以下是两个版本之间的区别： 一、首先是注册路由的时候v5的Switch改为了Routes v5，代码如下： import {Route, Switch} from 'react-router-dom' //引入react-router <div> {/* 注册路由（编写路由链接） */} <Switch> ...... ...... </Switch> </div> v6，代
react-routerV6版本和V5版本的详细对比
idiot_MAN的博客
11-12 1650
在V5中当我们希望给当前的路由添加一个样式的时候，我们可以使用NavLink模块来代替Link模块，给NavLink添加activeClassName属性，属性名为class名，在样式中定义active样式。在V6中NavLink组件会自动给当前的匹配到的路由NavLink添加一个class名为active，要实现高亮效果设置active样式。直接写所需要嵌套的路由，在二级路由里面通过Outlet组件实现嵌套路由的视图显示。在V6中需要在那个路由下面嵌套路由，就直接在。在V6中有两种方法进行路由重定向。
react路由配置方式详解
12-09
本文介绍了react路由配置，最近刚开始学，分享给大家，顺便给自己留个笔记。 包含了LInk跳转以及js触发跳转并传参。 这是项目的目录结构，主要的代码都在src目录下，src下面新建一个containers文件夹放我们的一些...
详解前端路由实现与react-router使用姿势
08-29
本篇文章主要介绍了详解前端路由和react-router使用姿势，详细的介绍了react-router的用法，有兴趣的可以了解一下
react 路由5路由6的区别
Fun779的博客
08-14 265
react Router v6使用Hooks来实现路由，而v5使用高阶组件（HOCs）来实现路由。这是它们之间最大的区别。React Router v5中的路由配置需要将Route组件作为子组件嵌套在Switch组件中。而React Router v6中的路由配置方式发生了变化。现在，我们需要在Routes组件中使用数组来配置路由。在React Router v6中，嵌套路由的使用方式更加简单直观。在v5中，嵌套路由需要在组件之间进行深度传递props，而在v6中，可以使用嵌套路由。React Router
React Router 4 与 之前版本（3）的区别
dieang2090的博客
02-21 229
详见：https://www.jianshu.com/p/bf6b45ce5bcc 转载于:https://www.cnblogs.com/jimaww/p/10412347.html
React路由(含新老版对比)
weixin_43604021的博客
08-09 730
React路由
react的路由v6版本与v5版本的差别
qq_1319620688的博客
03-03 652
react的路由v6版本与v5版本的差别
React 之Router路由（含5.0与6.0版本）
qq_45799465的博客
04-19 8636
一、路由介绍 二、事前准备 2.1 安装路由模块 2.2 相关组件 三、V5版本路由使用 3.1 声明式导航 3.2 编程式导航 3.3 嵌套路由 3.4 路由传参 3.5 重定向 与 404 3.6 三种路由的渲染方式【了解】 3.7 withRouter高阶组件 3.8 自定义导航组件 四、V6版本路由使用 4.1 声明式导航 4.2 编程式导航 4.3 重定向与404 4.4 传参 4.5 嵌套路由 4.6 批量配置路由
React学习笔记_React Router 6
qq_20470063的博客
03-10 609
React学习笔记
react-router5版本和6版本的区别
weixin_49035434的博客
08-04 83
react-router5版本和6版本的区别
react-router的params/search/state传参方式(对比React-Router4/5/6)
qq_44472790的博客
08-31 1475
react日常开发总结
React路由传参的方法，以及5.x和6的区别
weixin_47347505的博客
07-04 433
ReactRouter 5.x 和 6版本的学习笔记
React的router5和router6笔记
HaushoLin的博客
05-06 766
React的router5和router6笔记
react-router-dom6和5区别
柒君的博客
11-12 4841
待修订 6的改进： 1.useHistory钩子废弃，改为useNagetive钩子 2.Switch组件更名为Routes组件，且子元素只能是Route组件或React.Fragment组件 3.Route之间可以进行嵌套 4.Route的strict属性废弃，不在需要考虑路径结尾是否有‘/’ 5.Route添加了index属性，拥有index属性的Route不具有path属性（写了也无效），它在父级未匹配任何子路由时展示（类似于fallback） 6.新增Outlet组件，是子路由们渲染的容器 7.Ro
react 路由6跳转页面
最新发布
08-18
要实现React路由6的页面跳转，首先需要安装`react-router-dom`库。你可以使用以下命令来安装路由：`npm i react-router-dom --save` 或者 `yarn add react-router-dom --save`。 接下来，你需要在App.js文件中创建一级路由，并导入路由表和CSS样式。可以参考以下代码示例： ```javascript import { NavLink, useRoutes } from 'react-router-dom'; import routes from './routers'; // 导入路由表 import './App.css'; // 导入CSS文件 function App() { const element = useRoutes(routes); return ( <div> <div className="nav"> <NavLink className='navLink' to="/about">About</NavLink> <NavLink className='navLink' to="/home">Home</NavLink> </div> <div className="main">{element}</div> </div> ); } export default App; ``` 在上面的代码中，我们使用`useRoutes`方法将路由表应用到组件中，并使用`NavLink`组件来创建导航链接。 接下来，你可以在Home.jsx文件中编写具体的页面内容。以下是一个示例： ```javascript import React from 'react'; import { NavLink, Outlet } from 'react-router-dom'; const Home = () => { return ( <div> <p style={{ 'textAlign': 'center' }}>Home页面</p> <div className="nav"> <NavLink className="navLink" to="message">Message</NavLink> <NavLink className="navLink" to="news">News</NavLink> <Outlet /> </div> </div> ); } export default Home; ``` 上述代码中，我们使用`NavLink`组件创建了两个导航链接，并通过`Outlet`组件来渲染子页面。 这样，你就可以使用React路由6进行页面跳转了。根据你的路由配置，点击导航链接将会显示相应的页面。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [在react脚手架中react router v6 路由表、嵌套路由、编程式路由的使用，react点击按钮跳转页面并传参](https://blog.csdn.net/weixin_46360938/article/details/126747219)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

万事胜意sy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值