React学习笔记： Router v6

最新推荐文章于 2024-09-12 18:11:20 发布
最新推荐文章于 2024-09-12 18:11:20 发布
阅读量151 收藏
点赞数
分类专栏： # React学习笔记 文章标签： react.js javascript ecmascript
原文链接：https://www.bilibili.com/video/BV1kg411P725/?spm_id_from=autoNext
版权

React学习笔记： Router v6

  • index.tsx

  • 组件中使用，需要引入

  • Link类似于一个a标签，由react-router-dom提供

  • Routes定义路由规则，一个Route定义一个路由页面

  • Main.tsx
  • Outlet相当于子组件占位符，没有就不显示子组件，有则子组件显示在该位置

  • 使用hooks进行回退和获取参数

  • 获取:id参数及search字段

NGC_2070
关注
专栏目录
React 学习笔记
飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘飘
02-19 1496
文章目录React 学习笔记安装基础概念变量 css列表组件事件处理事件对象state表单处理一个实现评论的案例高阶概念props传递数据函数传递数据constructorprops childrenprops校验props校验组件通信父传子子传父兄弟组件通讯Context各种细节setState() 异步更新数据setState() 二次调用setState() 同步JSX 语法的转化过程组件更新机制组件性能优化虚拟DOM 和 Diff算法v6 路由 React 学习笔记 学习课程来自黑马程序员 安装
React 个人学习笔记
Bowen的博客
11-13 1031
创建项目： 1、如果没有react脚手架，先安装一个 npm install -g create-react-app 2、创建 create-react-app my_project 3、启动 npm start
React router(V6)随手笔记.三
fang_my的博客
04-15 547
一.路由表的使用useRoutes 首先我们观察下面的情景: 如果Route过多，会显得整个组件臃肿，且这些信息在我们的布局代码中的出现好像没那么必要。 路由表由此产生,这个hook主要用来解决Routes拥堵在界面上的问题。下面来讲解一下使用规则。我们刚开始使用的时候，还不是那么熟练，我不要急于一下子把它们分开到另一个文件夹内，我们就现在当前页面内引入，就把当前页面想象成我们将要从外部引入的那个routes.js。这样我们写起来就会非常方便，因为<Routes>就在页面上展示着，你对比着抄
React Router V6变化
九月萩的博客
12-08 2021
React Router v5升级到v6
React-Router v6 使用教学
陈书航的博客
04-20 3117
React-Router V6 出版一段时间，前端的小伙伴们也开始向着 v6 版本进行升级。v5 和 v6 的版本 api 有些差异。对此写一篇文档整理了下 v6 的使用教学，文章已实际使用为主。
React获取router路由路径里的相关信息
热门推荐
qq_41547882的博客
04-15 1万+
路由：'financial-budget/:id/edit' 路径：http://localhost:3000/financial-budget/4028963b7ce8b541017ce90bed9400ca/edit （1）用 useParams() 获取参数： import { useParams } from 'react-router-dom'; const { id } = useParams(); console.log(useParams()); ======> usePar
React-Router 获取路由参数
CrystalLee
09-18 1万+
慢慢整理哈！ componentWillMount() { let visitor = this.props.location.search; visitor = visitor.split('=')[1]; this.setState({visitor:visitor}); } 参考： https://blog.csdn.net/qq20004604/art...
2024年前端最全react-router-dom V6 中文文档教程总结_reactrouter6中文文档(1)，从零开始系统化学前端
2401_84619145的博客
05-06 1402
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】ter 可以直接嵌套 Router**这在之前是不行的需要在一个组件中再定义子路由。
React学习笔记---React路由（v5带部分v6）
丑小鸭变黑天鹅的博客
12-25 1366
React路由一、SPA的理解二、路由的理解三、react-router-dom1、理解2、相关API四、路由的基本使用五、NavLink的使用（v5和v6有区别）六、对NavLink二次封装七、Switch的使用(v6已经移除switch，替换为Routes）八、解决多级路径刷新页面样式丢失的问题九、路由的严格匹配与模糊匹配十、Redirect的使用（v6版本已经废除，用Navigate 代替）十一、嵌套路由（v5和v6使用起来不一样）十二、向路由组件传递params参数十三、向路由组件传递search参
react-router-dom v6文档
09-06
- *3* [React学习笔记_React Router 6](https://blog.csdn.net/qq_20470063/article/details/123361115)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...
react-router-dom@6获取路由传参
YUSIR 完美CODING世界
01-11 8298
router/index.tsx import App from "App"; import Home from "pages/Home"; import List from "pages/List"; import Detail from "pages/Detail"; import About from "pages/About"; import Login from "pages/Login"; import { BrowserRouter as Router, Routes, Route } f
React router(V6)随手笔记.二
fang_my的博客
04-06 971
一 .换成自己独有的地址栏信息 在地址栏里我们经常可以看到公司的名称或者当前页面的大概内容，其实我们也可以修改地址栏里的路径信息，很简单，在<Link>标签里的to属性里设置就可以 二.需要注意的点 我们需要注意的是，webpack会把react脚手架下名字叫做public的文件夹当成根目录，也就是说localhost:3000 其实就是public这个文件夹，（你可以暂时这样理解） 我这里在public文件夹下写了一个样式。简单的就是body{background-color:gree
react 路由 v6 数组配置路由
weixin_44510655的博客
10-05 1927
react router v6数组路由配置
React router v6写法总结
weixin_51277037的博客
04-25 2215
相对v5的变化 Routes 1.Route需要用Routes包裹 2.组件用element表示 3.路由内有嵌套需要加* <Routes> <Route path='/datatable/*'element={<Datatable/>} /> <Route path='/schedule/*'element={<Datatable/>}/> </Routes> 同时，子级路由的path前缀不需要加上父级的pa
React 项目中，如何实现有效的内存管理和防止内存泄漏？
最新发布
盼盼盼的博客
09-12 858
在 React 项目中，实现有效的内存管理和防止内存泄漏是确保应用性能和用户体验的关键。
spring Reactive 响应式编程
m0_37714848的博客
09-11 1052
spring reactive program
React 组件间共享数据
HHX_01的博客
09-09 1919
在 React 中，组件间的数据共享和状态管理是开发中的重要任务。通过状态提升，我们可以确保多个组件共享同一份状态，从而使它们的一致性得以保持。当应用变得更加复杂时，可以使用 React Context API 或第三方库来处理状态管理。掌握这些概念和工具，可以帮助你更好地管理应用的状态和数据流，提高代码的可维护性和扩展性。希望这篇文章能帮助你更好地理解 React 中的组件间共享数据。如果你有任何问题或建议，请在评论区留言。
React项目中使用发布订阅模式
zyqgt960812的博客
09-12 406
发布订阅模式（也称观察者模式）是一种管理跨组件通信的有效方式，尤其是在不希望直接依赖于特定组件的情况下。这种模式允许一个对象（发布者）通知多个其他对象（订阅者），而不必知道这些对象是谁或他们在哪里。这有助于解耦组件，使得代码更加模块化和可维护。
React学习笔记：状态提升、受控/非受控组件与组件通信
本篇JS-React个人学习笔记旨在分享作者对React框架的理解和实践经验，主要包括以下几个关键知识点： 1. **状态提升（State Management）** 子组件与父组件之间的状态传递有两种方式： - 子传父：在子组件中定义一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值