React router(V6)随手笔记.二

简介: React router(V6)随手笔记.二

一 .换成自己独有的地址栏信息


image.png

在地址栏里我们经常可以看到公司的名称或者当前页面的大概内容,其实我们也可以修改地址栏里的路径信息,很简单,在<Link>标签里的to属性里设置就可以

image.png

image.png

二.需要注意的点


我们需要注意的是,webpack会把react脚手架下名字叫做public的文件夹当成根目录,也就是说localhost:3000 其实就是public这个文件夹,(你可以暂时这样理解)

image.png

我这里在public文件夹下写了一个样式。简单的就是body{background-color:green}

image.png

image.png

在index.html文件里使用一下,这时候你可能会发现,页面刚开始的时候好好的,但是一旦你点击路径里的home链接或者about链接,那么这个css文件里的所有内容都会失效。这种情况会发生在多级路由里,什么是多级路由,就是你在link里写超过了一个斜杠 /

image.png

页面刚进来好好的

image.png

点击了某个标签链接,背景颜色失效

image.png

这时候打开f12开发者工具下的network 选项卡

image.png

我们发现css请求地址的url里多出了/hanzhenfang这个不存在的文件夹

Request URL: http://localhost:3000/hanzhenfang/css/index.css

在这里再重复一下,localhost:3000 其实就是public文件夹,这个文件夹里面压根就没有hanzhenfang这个文件夹,所以样式就会丢失。到这里你可能会有疑问,那不应该事404吗?没有网页那不就是404? 我们接着往下看请求返回的数据是什么

image.png

神奇吗?竟然是index.html这个文件,再举个例子,你在你的地址栏里随便闭着眼睛输文字

image.png

虽然控制台已经明确说出你的路由配置没有这个路径,但是它有一个保底的行为。

image.png

它还是会给你返回index.html这个文件,这是因为index.html是一个保底的文件,你地址错了,我就给你index.html,对!因为react就是单页面开发,那你的页面啥都没有,那我干脆就给你我唯一的页面算了。就是这么暖~

解决方法有三种:更改public文件下的index.html 中link标签中的css文件的路径

image.png

%PUBLIC_URL%是绝对路径的意思,这样你的绝对路径是肯定没错误的

第二种

image.png

(常用)将.css/前面的点去掉,.的意思是我在public这个文件夹下准备寻找,注意,是还得寻找.后面的一个文件,而去掉意思就是直接使用。所有也可以让样式不被丢失

image.png

再看一眼network的请求地址,也是没问题的

image.png

第三种是使用HashRouter替换BrowerRouter

三.默认首页显示


当我一进来网页的时候,因为是处于public下index.html文件,所以我的展示区并没有什么东西

image.png

这通常不太符合我们的需求,我想一进来就展示某个组件该怎么办呢?这时候我们就需要使用另外一个 react-router-dom里封装好的的组件 < Redirect/> re重新,direct方向。 意思就是浏览器已经迷路了,这时候需要一个引路人,这个标签就充当着这个角色,保底的人。

四.HashRouter和BrowerRouter最大的区别


BrowerRouter是使用windos.history来实现的而HashRouter是使用url的hash值来实现的。所以hashrouter最大的弊端就是无法保存history对象里的state参数的丢失,会发生一些页面内容丢失的情况。

image.png

五.在主页的时候控制台会有一个小错误


image.png

这是因为localhost:3000其实后面还有一个被省略的斜杠"/",localhost:3000/当你敲下回车的时候,浏览器其实是帮你自动写上这个斜杠的, 因为你的“/”也被当作一个被编辑的路由路径,但是你又没有设定这个“/”路由的组件,所以浏览器会报错,然后就回到了上一篇笔记的内容,你给我的少了,但是我却依然会返回给你一个index.html,因为这是我唯一的东西,于是乎react返回给你一个index.html页面。

image.png

解决方法也很简单,在v6的版本中 新加入了Navigate组件,使用方法如下,我现在希望用户一进来就是<About>组件的内容。Navigate必须有一个to属性,且值为一个注册的路径。

image.png

在这里我们需要知道额外的知识,即使你第一次进来页面,那么也会留下历史痕迹,注意下面浏览器的后退按钮,这是我第一次来却还可以进行后退操作,这是因为<Navigate>组件也是默认push模式,如果想要取消这个模式,那么就要给它第二个属性replace={true}

image.png

六.参数的传递


1.search 传递参数

传送数据 image.png

接收参数 需要用到 useSearch()并且调用里面的get方法来使用

image.png

2.location.state传参数

传递数据

image.png

接收数据

这里需要用到useLocation这个hook,但是uselocation这个方法返回的对象不能直接调用,我们用到的是里面的state这个属性,它也是对象。这里使用对象的同名结构赋值方法拿到state对象。

image.png

当然,如果你嫌麻烦,你也可以二次解构赋值

对于二次解构赋值,你可以把{state:}这段代码当成一个整体来看待,就比较好理解了

image.png

页面也没有问题

image.png

七.使用useNavigate 实现前进按钮和后退按钮


这个hook的使用方法类似于history.go()

image.png

image.png

相关文章
|
2月前
|
资源调度 前端开发 测试技术
React Router 路由管理
【10月更文挑战第10天】本文介绍了 React Router,一个在 React 应用中管理路由的强大工具。内容涵盖基本概念、安装与使用方法、常见问题及解决方案,如路由嵌套、动态路由和路由守卫等,并提供代码示例。通过学习本文,开发者可以更高效地使用 React Router,提升应用的导航体验和安全性。
283 19
|
2月前
|
前端开发 JavaScript 网络架构
实现动态路由与状态管理的SPA——使用React Router与Redux
【10月更文挑战第1天】实现动态路由与状态管理的SPA——使用React Router与Redux
39 1
|
4月前
|
移动开发 资源调度 前端开发
React Router V6 useRoutes的使用
【8月更文挑战第29天】 React Router V6 useRoutes的使用
174 3
|
4月前
|
前端开发
使用 React Router v6 进行布局
【8月更文挑战第27天】
47 1
|
4月前
|
前端开发 测试技术 开发者
React Router的神奇之处:如何用导航与路由管理让你的复杂SPA飞起来?
【8月更文挑战第31天】本文全面解析了React Router——一款用于React应用的路由与导航管理库。通过定义不同路径并依据URL渲染组件,React Router支持路径匹配、参数路由及嵌套路由等多种模式。文章详细介绍了其基本与高级用法,如使用`Link`组件导航、`Switch`组件进行路径匹配及`NavLink`自定义活动链接样式。此外,还探讨了懒加载、代码分割等性能优化技巧,并提供了简单示例代码,帮助读者快速上手。遵循本文最佳实践,开发者能够更高效地利用React Router构建复杂的单页面应用。
82 0
|
4月前
|
前端开发 UED
|
4月前
|
前端开发 JavaScript UED
什么是 React Router?
【8月更文挑战第31天】
29 0
|
5月前
|
前端开发 JavaScript Java
React 速通笔记
【7月更文挑战第17天】
52 1
|
4月前
|
前端开发 JavaScript UED
React 基础与实践 | 青训营笔记
React 基础与实践 | 青训营笔记
54 0
|
7月前
|
资源调度 前端开发 JavaScript
React Router:React应用的路由管理
【4月更文挑战第25天】React Router是React的官方路由库,用于管理SPA的路由。它基于组件,将URL映射到React组件,核心概念包括路由、链接和导航。设置路由时,在根组件中使用BrowserRouter或HashRouter,包裹Routes组件,定义Route规则。Link组件用于创建内部链接,实现导航。高级特性包括嵌套路由、参数化路由和编程式导航,如子路由、动态参数和JavaScript控制的导航。掌握React Router能帮助开发者更高效地构建复杂的React应用。