一 . 换成本人独有的地址栏信息
在地址栏里咱们常常能够看到公司的名称或者以后页面的大略内容,其实咱们也能够批改地址栏里的门路信息,很简略,在 <Link>
标签里的 to 属性里设置就能够
二. 须要留神的点
咱们须要留神的是,webpack 会把 react 脚手架下名字叫做 public 的文件夹当成根目录,也就是说 localhost:3000 其实就是 public 这个文件夹,(你能够临时这样了解)
我这里在 public 文件夹下写了一个款式。简略的就是body{background-color:green}
在 index.html 文件里应用一下, 这时候你可能会发现,页面刚开始的时候好好的,然而一旦你点击门路里的 home 链接或者 about 链接,那么这个 css 文件里的所有内容都会生效。这种状况会产生在多级路由里,什么是多级路由,就是你在 link 里写超过了一个斜杠 /
页面刚进来好好的
点击了某个标签链接,背景色彩生效
这时候关上 f12 开发者工具下的 network 选项卡
咱们发现 css 申请地址的 url 里多出了 /hanzhenfang 这个不存在的文件夹
Request URL: http://localhost:3000/hanzhenfang/css/index.css
在这里再反复一下,localhost:3000
其实就是 public 文件夹,这个文件夹外面压根就没有 hanzhenfang
这个文件夹,所以款式就会失落。到这里你可能会有疑难,那不应该事 404 吗?没有网页那不就是 404?咱们接着往下看申请返回的数据是什么
神奇吗?居然是 index.html 这个文件,再举个例子,你在你的地址栏里轻易闭着眼睛输文字
尽管控制台曾经明确说出你的路由配置没有这个门路,然而它有一个保底的行为。
它还是会给你返回 index.html 这个文件,这是因为 index.html 是一个保底的文件,你地址错了,我就给你 index.html,对!因为 react 就是单页面开发,那你的页面啥都没有,那我罗唆就给你我惟一的页面算了。就是这么暖~
解决办法有三种: 更改 public 文件下的 index.html 中 link 标签中的 css 文件的门路
%PUBLIC_URL% 是绝对路径的意思,这样你的绝对路径是必定没谬误的
第二种
(罕用)将.css/ 后面的点去掉,. 的意思是我在 public 这个文件夹下筹备寻找,留神,是还得寻找. 前面的一个文件,而去掉意思就是间接应用。所有也能够让款式不被失落
再看一眼 network 的申请地址,也是没问题的
第三种是应用 HashRouter 替换 BrowerRouter
三. 默认首页显示
当我一进来网页的时候,因为是处于 public 下 index.html 文件,所以我的展示区并没有什么货色
这通常不太合乎咱们的需要,我想一进来就展现某个组件该怎么办呢?这时候咱们就须要应用另外一个 react-router-dom 里封装好的的组件 < Redirect/>
re 从新,direct 方向。
意思就是浏览器曾经迷路了,这时候须要一个引路人,这个标签就充当着这个角色,保底的人。
三.HashRouter 和 BrowerRouter 最大的区别
BrowerRouter 是应用 windos.history 来实现的而 HashRouter 是应用 url 的 hash 值来实现的。所以 hashrouter 最大的弊病就是无奈保留 history 对象里的 state 参数的失落,会产生一些页面内容失落的状况。
四. 在主页的时候控制台会有一个小谬误
这是因为 localhost:3000 其实前面还有一个被省略的斜杠 ”/”,localhost:3000/
当你敲下回车的时候,浏览器其实是帮你主动写上这个斜杠的,
因为你的“/”也被当作一个被编辑的路由门路,然而你又没有设定这个“/”路由的组件,所以浏览器会报错,而后就回到了上一篇笔记的内容,你给我的少了,然而我却仍然会返回给你一个 index.html,因为这是我惟一的货色,于是乎 react 返回给你一个 index.html 页面。
解决办法也很简略,在 v6 的版本中 新退出了 Navigate
组件,应用办法如下,我当初心愿用户一进来就是 <About>
组件的内容。Navigate
必须有一个 to 属性,且值为一个注册的门路。
在这里咱们须要晓得额定的常识,即便你第一次进来页面,那么也会留下历史痕迹,留神上面浏览器的后退按钮,这是我第一次来却还能够进行后退操作,这是因为 <Navigate>
组件也是默认 push 模式,如果想要勾销这个模式,那么就要给它第二个属性replace={true}
五 参数的传递
1.search 传递参数
传送数据
接管参数
须要用到 useSearch()
并且调用外面的 get 办法来应用
2.location.state 传参数
传递数据
接收数据
这里须要用到 useLocation
这个 hook,然而 uselocation 这个办法返回的对象不能间接调用,咱们用到的是外面的 state 这个属性,它也是对象。这里应用对象的同名构造赋值办法拿到 state 对象。
当然,如果你嫌麻烦,你也能够二次解构赋值
对于二次解构赋值,你能够把 {state:}
这段代码当成一个整体来对待,就比拟好了解了
页面也没有问题
六. 应用 useNavigate 实现后退按钮和后退按钮
这个 hook 的应用办法相似于 history.go()