React Router的使用

React Router 是 React 项目的路由库，使用很方便，也是 React 前端项目的主要功能库之一。这里的路由指的是客户端的路由，在客户端路由时，浏览器是不会发送页面请求的，只会发送数据请求。

安装依赖

npm install react-router-dom localforage match-sorter sort-by

主要组件

首先创建一个 Router，这里创建的是 BrowserRouter，还有其他类型的 Router，Browser 和 Hash 是使用比较广泛的 Router。

const router = createBrowserRouter([
  {
    path: "/",
    element: Hello world!,
  },
]);

初始化

（图片来源网络，侵删）

ReactDOM.createRoot(document.getElementById("root")).render(
  
    
  
);

在没有路由的时候，这里放的是入口组件，有了路由，就由路由进行管理了，如上所示，目前进入应用后显示的就是 Hello World。

path： 是 url 中地址

element： 是React 组件

错误处理

在项目中添加错误处理组件，组件出现任何异常时进行显示。

const router = createBrowserRouter([
  {
    path: "/",
    element: ,
    errorElement: ,
  },
]);

嵌套路由

嵌套路由是指在页面中的某一部分显示内容，而不是覆盖整个根元素。这里 children 就是嵌套的元素，Root 页面是一个左右结构的页面，左侧显示导航区，右侧显示内容区。

{
    path: "/",
    element: ,
    errorElement: ,
    loader: rootLoader,
    children: [
      {
        path: "contacts/:contactId",
        element: ,
      },
    ],
 },

嵌套路由中可以设置默认路由，这样避免了初始化是白屏，没有数据的情况。

  children: [
      { index: true, element:  },
      /* existing routes */
    ],

只有配置还不行，还需要在页面中指定显示在什么位置，Outlet 就是子路由组件显示的位置。

     {/* all the other elements */}
     
       
     

链接

对于客户端路由来说，页面中不能再出现

Your Name

NavLink

NavLink 和 Link 不同之处就是 NavLink 内部有一个状态记录是否处于点击状态。

   [
     isPending ? "pending" : "",
     isActive ? "active" : "",
     isTransitioning ? "transitioning" : "",
   ].join(" ")
 }
>

useNavigate

useNavigate钩子函数可以进行路由跳转，例如跳转到历史的上一页，useNavigate(-1)

const navigate = useNavigate();
  return (
    
      {/* existing code */}
      

        Save
         {
            navigate(-1);
          }}
        >
          Cancel
        
      
    

dataRouter

ReactRouter v6 中提供 DataRouter 的功能，例如 loader，action，useNavigation 等，这样路由就监控了数据增、删、改、查的状态，通过这种控制可以在客户端添加处理，比如数据是不是获取中还没有返回，这样前端就可以进行对应的处理，例如添加等待动画。

ReactRouter 使用起来比较简单，做路由管理、跳转等等。