React Router version 5, version 6对比

此篇文章不是码农C+V的解决方案，没有太多的代码指引，只是记录一下撸一把React Router代码之后，React Router版本5和版本6度使用心得，也会附上版本6的demo代码。

总体来说，版本6最大的改变是引入了Data Router的概念，让你可以不仅仅可以监听，操作，管理页面的path，可以让你的路由监听http请求，使得你可以集中管理你的页面请求，也增加了ErrorBoundary监听的支持，版本6会自动监听你在loader或者action中的抛出异常，你需要做的只是增加一个ErrorBoundary页面，自定义你想向客户展示的内容。

撇开学习成本不说，版本6提供了页面数据处理中心，使得开发者可以更加方便快捷的在路由的跳转前中后，对数据进行集中处理，比如登录信息，权限的验证等，还是可以给小伙伴们提供便捷的。

需要注意的是，因为这是SPA，这些集中管理的信息会在页面刷新之后清除，所以最好只存储一次性数据。这么说来，版本6的路由功能还不至于强大到每个App都必须升级到此版本。

创建路由时，React Router version 6可以让你使用loader，action，fetcher等方法为页面提供数据。

loader

loader便于在路由元素渲染前为其提供数据

action

方便接受页面中的form表单action，此函数需要配合useFetcher使用。

版本6增加了许多钩子函数，很多都是基于React的上下文特性让你编程方式编写程序，比如：

useNavigate

useNavigate会返回一个函数，让你可以导航到任意一个路径，此钩子需要在Route上下文里使用。 这个钩子函数的实现底层，其实就是封装了一个window.history，让用户可以只通过一个钩子的入口来使用更多的功能。useNavigate可以带参数跳转

useLocation

useLocation返回一个window.location对象，这个对象里面包含了使用useNavigate跳转过来的值，比如：state

useLoaderData

此钩子提供路由中的loader的返回值，一般都是异步返回值。

useFetcher

提供一组复杂的对象，该对象有Form，formData，data等属性。Form可用于HTML中，作为form标签使用，这样便于之后获取或操作fetch之后返回的数据。formData是fetch之后的异步请求返回的response。data属性是路由中action函数返回的数据。由于此useFetcher只看文字，枯燥无味，理解不到位，可看底下的截图，加深理解。