1.什么是SPA
SPA俗称单页面应用。就类似于我们所看到的网站都集成于一个html文件，然后在网站交互的过程中始终保证在此页面上进行展示。页面标签不进行刷新，给用户一种未跳转的假象，但是也会面临着初次加载慢等。
单页应用程序是一种基于 Web 技术的应用程序架构模式，其中所有的页面加载、渲染和切换都在单个 HTML 页面中完成，而不需要每次切换页面时重新加载整个页面。相反，通过使用 JavaScript 和 AJAX 技术，SPA 在单个页面内动态地加载和更新内容。
在传统的多页应用程序中，每个页面对应一个独立的 HTML 文件，每次切换页面都需要从服务器重新加载整个页面。而在 SPA 中，初始加载时只需要下载一个 HTML 文件，之后的页面切换通过动态加载数据和更新页面的方式进行，大大提高了用户体验和页面加载速度。
SPA 的优点包括：
-
更快的用户体验：因为只需要加载一次初始页面，后续的页面切换只需要加载数据和更新部分内容，响应更迅速。
-
减少服务器负载：由于只需要返回数据而不是整个页面，减少了服务器端的压力和带宽消耗。
-
更流畅的页面切换：通过使用前端路由技术，可以实现无刷新的页面切换，提供更加流畅的用户界面。
-
更好的交互性：SPA 可以通过 JavaScript 操作 DOM 元素和响应用户事件，实现更丰富的交互效果。
-
可维护性和可扩展性：通过使用前端框架（如React、Angular、Vue等），可以将应用程序拆分为组件，提高代码的可维护性和可扩展性。
2. 什么是路由
路由就类似于我们所使用的路由器，正是因为有路由的出现，才使用我们能够在单页面应用中实现不同页面的切换，因为路由中存在一组key和value的值。就无需刷新页面。
3.react中的路由
在react中我们需要引入第三方包来进行操作。这里引入的是react-router-dom@5的版本。然后我们可以根据其中提供的各种的API完成单页面的路由切换。
下列分别引入的是路由的模式，路由的链接，以及自定义激活状态的路由连接。下面是在render中渲染的html标签。
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<Header />
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
{/* <a className="list-group-item active" href="./about.html">About</a>
<a className="list-group-item" href="./home.html">Home</a> */}
{/* RouteBrowserRouterr:就是利用H5推出的history身上的API
HashRouter:就是利用#,也就是锚点 hash值
*/}
{/*NavLink在点击的时候就会去找activeClassName="ss"所指定的class的值，如果不添加默认是active
这是因为Link相当于是把标签写死了，不能去改变什么。
*/}
{/* <NavLink className="list-group-item" to="/about">About</NavLink>
<NavLink className="list-group-item" to="/home">Home</NavLink> */}
{/*将NavLink进行封装，成为MyNavLink,通过props进行传参数，标签体内容是props特殊的一个属性，叫做children */}
<NavLink className="list-group-item" to="/about">About</NavLink>
<NavLink className="list-group-item" to="/home">Home</NavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
{/* 注册路由，也就是写对应的关系 */}
{/* 路由可以匹配多个路径,因此可以展示多个组件，但是按道理应该只匹配一个即可，而且多个匹配会很耗费性能
Switch:就可以保证路由在匹配到第一个路径之后，就不和继续向下走。 */}
<Switch>
<Route path="/about"component={About}/>
{/* exact={true}：开启严格匹配的模式，路径必须一致 */}
<Route path="/home" component={Home}/>
{/* Redirect:如果上面的都没有匹配到，就匹配到这个路径下面 */}
<Redirect to = "/about"/>
</Switch>
</div>
</div>
</div>
</div>
</div>首先是路由模式。在react中如果我们要使用路由，那么要确保路由模式要完全包裹住link和route。这里为了方便我们可以将路由包裹在最外面的App标签中。这样无论我们在后面怎么添加路由信息。都会保证路由被包裹在路由模式中
然后就是Link和NavLink。其实这两种归根结底都是一样的。只是后面这种我们可以动态的修改其激活状态的样式。该函数我们需要传递to，也很好理解就是跳转到那个路由上。不过建议其跳转的path都采取小写的写法。而下面的我们可以自定义其对应的路由信息
但在开发过程中我们可能所写的路由信息不止一个，可能会有很多个。因此可能对应的path可能会有重复。这时我们可以使用Switch、当然也需要从react-router-dom中引入。使用它的好处是我们可以避免匹配到合适的path时仍要往下匹配。节约了时间和效率。
然后如果我们想一启动页面就要保证页面跳转到对应的路由上，我们可以使用Redirect，来进行默认路由的跳转。启动项目后对应的path位空串，因此无法匹配到我们所写的页面的路由。所以我们给一个Redirect来进行保底。让他可以默认跳转到对应的路由上。
4.多级路由
当然在开发过程中我们也无法避免有时会出现嵌套路由的出现。其实在实现嵌套路由的时候，我们使用了路由的模糊匹配模式。
我们可以比较一下下面代码的不同，我们可以发现在route的path和link的path也可以不一样。这里就是利用了路由的模糊匹配模式。其实模糊匹配通俗的将就是路由Route的path有啥，你的Link中也必须有啥，且要以Route的path打头才行。像如下代码才能实现跳转到home页面。
那么路由有模糊模式，也会有严格模式，在严格模式下我们所写的path就必须一摸一样才行，但是开启严格模式有时候会影响我们的开发。例如后续的二级路由等可能无法成功的显示出来。
下面的代码是无法跳转的
开启严格模式下的路由
5.路由传参
React中路由传参大概有三种，分别是search、params、state。下面将分别讲解其中的传参思路
5.1 params传递参数
我们可以在对应的链接Link中进行传递参数的操作，当然是通过/属性的形式添加到对应的url后面。然后在路由Route那进行对应参数的接口使用的是/:属性的形式。然后传递到对应页面中的props中的metch中。
5.2 search传递参数
我们通过search传递参数时，对应的格式为?key=value&key=value的形式来进行传递。因此我们需要在Link中将需要传递的参数按照上述格式进行书写。因此代码如下
5.3 state 传递参数
我们可以在Link中不在只是写入单单的字符串，而是可以写入自定义的对象，这样就可以实现对state传递参数。
接受的话需要我们特别处理一下，因为state在location中默认值时underfined，因此我们在操作时就需要使用 || 来避免在underfined上 取属性。因此需要实现对应的引入hook函数，如useLocation
5.4总结
上述三种路由传参都是比较常用的。但是如果我们不想让其他用户知道我们路径上传递的什么参数，则我们可以使用第三种方法。如果是携带参数的话我们可以使用第一或者第二种方法。