react-router-dom v6的基本使用

一、安装

在当前项目中用npm i react-router-dom来安装react-router-dom这个包

二、使用

2.1配置路由

2.1.1 createBrowserRouter和createHashRouter API

配置路由的目的就是配置你什么地址跳转到什么页面，目前官方提供的最新的配置路由的api中主要的两个有createBrowserRouter和createHashRouter。这两个api底层用了不用的方法来实现相同的效果，也就是切换地址不会向后端请求数据，而是前端切换页面，以此来达到最快的页面响应。
createBrowserRouter底层是用到了h5的新特性history，这个方法可以实现修改地址栏地址而不会向后端发起请求，并且history这个对象本身就提供了很多控制页面跳转，前进后退等方法。而createHashRouter则是利用了锚点跳转不发起请求的特点，也就是你在网络地址后面加上#,#后面的内容无论怎么改变都不会引起浏览器发起网络请求，然后通过监听onhashchange事件来监听这个锚点的变化，以此来匹配配置的路由。

2.1.2如何配置路由

两个api的使用方法相同，我这里就介绍createBrowserRouter的使用方法，这个api里面传入一个对象数组参数，如下面代码所示。这是按层级进行页面的配置的，里面主要的就是path、loader、action、element、errorElement、children这几个属性
path: 这个属性是用来配置当前的路由的地址，也就是当你访问http://localhost:3000/contacts就会匹配到这个路由。（我这里默认项目是开在本地3000端口上，下面也默认开在这个地址上，不在赘述）
loader: 这个属性是一个方法，当你进入当前路由后，渲染也面前会触发的一个方法，这个之后会详细讲解
action： 当你发起form提交事件的时候，会触发这个方法，需要配合react-router内部提供的Form组件使用，后面会详细讲解。
element: 这个就是你需要渲染出来的页面了。
errorElement: 当你页面出现错误时候，一般是不希望显示一些浏览器默认的报错信息页面，显得产品很多错误，可以通过这个来显示你想要展示给用户的页面和信息，将错误控制在可控范围内。
children: 这里面的内容也是一个对象数组，对象里也是这些配置，作为嵌套路由，像下面这个例子，当你这样配置后，当你访问http://localhost/contacts/detail时候，react-router就会匹配到最外层的那一层路由，然后显示Contact组件，然后会匹配到里面的那一层地址为detail的路由，然后在Contact组件里的Outlet组件里显示Detail组件。这里引出一个Outlet组件，这个是react-router提供的组件，用来显示嵌套路由的。
index： 还有一个index属性，通过配置其为true，则默认匹配这个路由

const router=createBrowserRouter([
                    {
   
   
                        path:'/contacts',
                        loader:contactLoader,
                        action:contactAction,
                        element:<Contact/>，
                        errorElement:<ErrorPage/>,
                        children:[
							{
   
   
								path:'detail',
								element:<Detail/>
							}
						]
                    },
])

2.2 应用路由

RouterProvider是react-router提供的组件,利用这个组件来将react-router应用到也项目上，这组件上有一个属性 router,将之前用createBrowerRouter创建好的router赋值上去，就正常应用上react-router了。

ReactDOM.createRoot(document.querySelector('#root')).