一 .换成本人独有的地址栏信息

在地址栏里咱们常常能够看到公司的名称或者以后页面的大略内容，其实咱们也能够批改地址栏里的门路信息，很简略，在<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（）