前端路由的理解以及简单使用React路由是前端实现单页应用(SPA)的关键技术，通过监听URL路径变化动态渲染对应组件，

1.什么是react路由

编辑

我们放一个多页面的html，通过a标签跳转。

编辑

打开之后是这种样式，我们把黄框内容称之为导航栏，通过切换导购在展示区展示不同的内容。

编辑

我们之所以可以通过点击不同的链接来显示不同的展示区，a标签是通过直接访问不同的地址，也就是我们现在本地服务器上的服务是加载html到浏览器上，我们切换到不同的路径来使用这个服务，也就是切换html使用这个服务。这需要跳转到这个地址，刷新整个页面，但是实际上这样用户体验会很差，我们希望我们可以改变路径的同时，不会刷新整个页面，只会刷新我们想要变化的内容在特定的区域，那么我们就需要使用路由了。

如果我们使用了路由，描述出来就是当前按钮是都是白色，然后不显示内容，当前页面地址是localhost：3000，然后我们点击Home 地址变成localhost：3000/home，不是home.html也没有跳转页面。和a标签跳转不同，因为这是路由链接。点击后地址改成/home，路由里面有一个东西监测路径变化。这是我们需要搞明白的路由的原理。

编辑

监测到了home组件就展示出来了，前端路由工作原理靠浏览器的路径。这是路由的实现方式，

编辑

点击按钮，改变路径，路径改变就检测，监测到了就匹配对应的组件，然后展示。映射关系。也就是每一个路径对应的一个组件。

编辑

工作原理是，通过改变path（与url不同，url指127.0.0.1：5501/about.html ，path只是指/home）,通过path去找到对应的value，也就是路径名去找对应的组件。然后展示组件。

2.路由的分类

编辑

我们现在只学习react，所以跳过后端路由。

3.前端路由的原理

为什么能够监测到路径path变化，为什么点击这种链接就不会引起页面刷新，以及为什么点击链接就能变地址栏为/home ，怎么监测谁监测的。跟浏览器history有关，这里涉及到DOM，BOM（document，window）window是浏览器对象，document是标签对象。

编辑

这里我们可以看到浏览器的历史记录，在BOM浏览器对象有专门的history熟悉管理浏览器路径，历史记录，我们借助一个库history.js来操作。

编辑

我们引用这个库，来帮助我们更加简单的书写怎么去改变路径，而且不跳转刷新页面，我们给a标签一个点击事件，点击事件发送的时候调用函数的返回值，函数里面是给浏览器添加一个路径test1，这里的/只是分隔符没什么意义，然后返回false，点击事件取消。就相当于a标签点击后只是push了一个新路径给浏览器历史记录，没有发送a标签的跳转。

编辑

我们监听路径location当前路径，变化了就输出出来，我们这时候发现路径变为了test1，我们现在就实现了基本的原理，点击链接改变路径但是不跳转，以及拿到当前的路径。变更到前端路由就是我们点击链接拿到链接，通过链接去找对应的组件来展示对应的组件。

我们是怎么push路径的呢

编辑

浏览器的地址历史记录是栈结构，也就是我们push的时候，栈顶会变成我们push的路径，让我们replace替换的时候，当前栈顶的就被替换掉了，这样回退和前进也就是倒着来拿，就像吃饼干一样一样，只能先拿上面的，替换可以直接替换掉，之前的就不存在了。

4.前端路由的使用

了解了原理是通过浏览器history实现的，我们就可以去使用了。

编辑

react路由有三种，我们现在只学第一种web前端路由。

编辑

首先要明白的是router是路由器，我们操作的是路由，通过点击路由链接来切换对应的路由，然后展示对应的组件。

ok现在我们进入案例

编辑

我们希望用路由来代替原本的a标签跳转页面，再次回到这个页面，找到对应的导航区以及展示区，导航区就是我们的路由器，这里我们分两步实现，第一步点击导航链接，浏览器路径改变，第二步路由器监听到当前路径根据路径匹配组件，渲染组件到页面展示。

我们先替换掉a标签用路由库里面的组件。

编辑

这里报错

编辑

我们需要在Router路由器里面书写路由链接。

编辑

路由器有两种，区别我们暂时理解为Hash多了一个#号。

编辑

我们这样就不会报错了。但是我们现在只是弄了两个链接上去，点击后可以更新到about路径，但我们没有注册路由，也就是在路径上定义展示的组件。

编辑

当我们/about路由点击之后，页面路径变为about，这时候我们就可以注册对应的about路由当页面路径是about的时候展示components={}组件，这时候展示的组件是路由组件。

编辑

这里报错说明路由也需要被路由器包裹。

编辑

这样展示不出内容，因为我们相当于建立了两个路由器，这两个路由器并不是相通的。

编辑

这样就创建在同一个路由器下，这样实现了但是有问题，如果我们想要在下面添加结构的时候，还需要改变路由器的位置。

所以我们直接在引用根组件App的index.jsx中直接在App组件外面加路由器

编辑

5.路由组件和一般组件的区别

编辑

这个是一般组件

编辑

这个是路由组件

编辑

路由组件放在pages文件夹，一般组件放components文件夹，更明显的区别是

编辑

一般组件默认props是空，也就是我们没传props的时候是空的，而路由组件默认三个对象。

6.Link和NavLink

编辑

这里的Link无法添加高亮效果,比如点击后高亮,换成NavLink自动有了高亮效果。因为NavLink多了一个activeClassName属性,true的时候，会变高亮，

编辑

这里定义了样式，以及！important 权限最高。这样我们点击后颜色就会变化。

7.封装NavLink

当我们需要多个路由的时候，就需要多个路由链接，

编辑

重复就需要去优化，简写

编辑

这里我们封装之后，重复的样式就不需要一次次的写，我们只需要在调用封装的MyNavLink组件的时候传过去to参数以及children文本就可以，也可以直接书写标签体body自动传过去，这是通过props传。

8.Switch的使用

编辑

当我们注册两个路径一样的路由时候，我们发现当我们切换到路径home的时候两个都会展示出来，说明当我们切换路径home的时候，会去寻找所有的路由路径为home的组件渲染出来。

这时候如果我们写了很多路由的时候，就会去一个个找，对照是不是home路径的路由，这时候运行起来就浪费了资源，这时候包裹一个Switch就可以了（注意引入）通常路径和组件是一一对应的，当我们找到对应路径的时候就可以停止了，优化效率。

9.解决样式丢失问题

编辑

如果我们的路由是多级路由，那么会导致样式丢失，这是因为当我们运行服务打开页面的时候，默认打开的localhost：3000端口，这时候我们的样式由于在index.html页面引入所以我们是可以正常显示的，但是当我们刷新的时候，我们发现样式丢失了。

编辑

为什么css文件找不到，因为我们发现路径里面多了一层atguigu，我们的public文件里面没有，自然就拿不到css，而且找不到默认返回index.html，所以显示请求还是成功的，而且response的值是index.html。这里面涉及到的概念是。

localhost：3000是内置的一个服务器，是webpack里面的devServer开启的。public文件夹相当于我们localhost：3000内置服务器的根路径。请求什么就给什么，我们访问的url没有css，自然就拿不到css，但是当访问的url没有东西的时候，我们就返回index.html，所以我们怎么解决呢。

1.修改路径

编辑