React路由基本概念
在一个项目的开发当中，我们通常需要创建多个组件与页面，路由的基本功能便是URL路径与组件进行绑定，在对应的URL路径下渲染相对应的组件，从而将对应的函数与组件渲染到用户的页面上，路由还可以使我们拥有浏览器后退的功能。React路由的功能可以总结为：
- 订阅和操作历史堆栈
- 将URL与路由相匹配
- 通过路由匹配渲染嵌套的用户界面
所以，搭建路由是我们项目的基础，路由也可以使我们更好的管理我们的组件，养成我们组件化开发的习惯。
既然路由这么多好处，那要如何搭建我们React的路由呢？ 接下来我们一起试试吧！
React路由的基础搭建
引入路由
跟着上一篇，我们搭建好了我们React项目，但是我们还没有引入我们的React路由，现在让我们打开我们的终端（终端路径要和我们的项目路径保持一致哦），接着在终端中输入
npm i react-router-dom
按下回车，这样我们就引入了我们的React路由包了，我们可以在package.josn文件中找到我们下载的React路由包以及版本。
这样我们就完成了搭建路由的第一步。
构建基础路由
接下来我们搭建我们的基础路由。
首先，我们在src文件夹下创建一个router文件夹作为我们管理路由的文件夹，然后，我们在router文件夹下创建一个index.js的js文件，这个文件就是我们编写路由与路由方法的文件了。
让我们进入index.js文件，首先我们要引入我们搭建路由的方法，这里我们需要选择我们要用什么样的路由模式，对于大部分的前端框架来说，路由一般分为hash模式与history模式。
两个模式的区别主要为：
1.URL路径不同：hash模式为url/#/，history模式为：url/
2.hash模式只能后退，而history可以前进和后退
在React-router中，我们需要引用createBrowerRouter 和 createHashRouter 函数负责创建history模式的路由或者hash模式的路由，这里我们选择使用history模式。
在我们的index.js中，引入创建路由的函数
import { createBrowerRouter } from "react-router-dom";
接下来定义我们的路由
const router = createBrowerRouter( [ { path:'/', element:<div>holle word</div> } ] )
将我们的路由导出
export default router
这样我们就定义好了我们的基础路由，接下来我们去使用我们的路由。
来到我们的src/index.js文件中，引入我们创建的基础路由
import router from './router
然后渲染我们的路由
import {RouterProvider} from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( <React.StrictMode> <RouterProvider router={router} /> </React.StrictMode> );
整体代码：
当当！这样就创建好了我们的基础路由了，通常我们将这条基础路由作为我们的根路由，将它作为我们的用户界面的根布局。
路由的配置
懒加载
回到我们router/index.js文件，我们发现，element并没有使用到组件，这和我们所说的路由与组件相匹配不一样呀。
element:<div>holle word</div>
确实，在正常的开发中，我们不会直接在路由配置文件里写我们的页面代码，在多页面的开发中，会让我们的代码结构繁杂难以优化。通常我们将对应的页面以组件的方式引入路由，现在我们引用组件吧。
引入我们的对应页面文件，并命名 import Main from '../App'
然后将element进行替换 element : <Main />
这样，我们便将路由与页面组件对应起来了（鼓掌），但是先别高兴，聪明的同学已经发现这里有一个潜在的问题，如果我们路由很多的情况下，我们要将页面组件一个个引入吗？这个工作量真是不小呢，那有没有其他的办法呢？接触过vue路由的我想到了vue的路由懒加载，懒加载顾名思义就是在使用到路由时才去加载路由对应的组件，这样我们就不用一个个的引入我们的组件了。对应的，react也有自己的路由懒加载方法吧。于是我便去翻看react路由的文档。
文档地址：createRoutesFromElements | React Router6 中文文档 (baimingxuan.github.io)（要养成阅读文档的好习惯哦！）
发现虽然有懒加载的属性，但是需要将我们的基础路由的格式进行改造，还好，我们刚刚搭建我们的路由，如果我们已经写了很多路由，那改造的工作量就大咯。那要如何实现我们的路由懒加载呢？这里需要用到react-router的一个属性——lazy。
很显然，lazy属性代表懒的意思，也就是懒加载。那要如何使用我们的懒加载呢？
首先，我们先注释掉我们的应用语句//import Home from '../App'
再注释掉我们的 //element : <Main />
这样，我们就没有提前引入我们的组件了。接着我们改写我们的路由对象
{ path:'/', lazy:async () => ({Component : (await import('../App')).defult }) }
这样就实现了我们路由的懒加载，让我们来解释这段代码，首先我们使用到了async与await语法糖，用来等待我们懒加载路由的加载完成，其次，我们使用了Component替换掉了element,.defult表示我们引用组件的默认样式。
当然，实现路由懒加的方式不只一种，这里大家可以去搜索更多的react路由懒加载的方案（可以将收集到的react路由懒加载的方案写到评论区哦）。
在懒加载中，我们为何使用Component而不是element呢？或者说，element为何无法这样渲染我们引入的组件呢？这里我们简单的说说在React中Component与element的区别。
首先，element是react路由 -v6中更新的属性，它的功能是用来选择路由路径需要渲染什么样的组件，用来替代Component,element比Component更加的灵活，它不仅可以用于渲染组件，也可以渲染页面元素，也就是说element使用更加的宽泛，更加的灵活。
这里是一篇关于在React中element与Component的文章，有兴趣的可以阅读阅读。
React 探秘 - React Component 和 Element（文末附彩蛋demo和源码） - 知乎 (zhihu.com)
这里我们不做深入的了解，或许有一天会去深入的研究，让我们从这些抽象的概念中走出，继续来开发我们的项目。搭建好了我们的基本路由，我们现在来编写其他的路由吧。这里我列举了几个我们需要用到的基础路由。
404路由的开发
类似于我们在访问网络时出现404的情况，即找不到服务器的情况。404路由这是我们找不用户输入的对应的路由的情况。为了优化我们的用户体验而进行的兜底页面。在我们router/index.js文件中，编写
{path:'*' , element:<div>Error Page</div>}
这样我们就初步分完成了我们的404路由。
其他路由的开发
在一个项目中，我们会使用到很多的路由，这里我就不一一举例了，我会在接下来的开发中将使用到的路由功能再进行介绍，这里放一篇关于react路由基础使用的文章，感兴趣的小伙伴可以一起看看哦。
React全家桶 - 【ReactRouter】- 基础使用、路由导航、路由传参、嵌套路由、二级路由配置、路由模式、404
接下来我们就要编写我们的页面了（加油！！！！）
