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: <div>Hello world!</div>,
  },
]);

初始化

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

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

path: 是 url 中地址
element: 是React 组件

错误处理

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

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

嵌套路由

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

{
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    children: [
      {
        path: "contacts/:contactId",
        element: <Contact />,
      },
    ],
 },

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

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

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

<>
     {/* all the other elements */}
     <div id="detail">
       <Outlet />
     </div>
</>

链接

对于客户端路由来说,页面中不能再出现 <a href... 这会导致服务器渲染。在 React Router 中需要用 Link 进行替换。

<Link to={`contacts/1`}>Your Name</Link>

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

<NavLink
 to="/messages"
 className={({ isActive, isPending, isTransitioning }) =>
   [
     isPending ? "pending" : "",
     isActive ? "active" : "",
     isTransitioning ? "transitioning" : "",
   ].join(" ")
 }
>

useNavigate

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

const navigate = useNavigate();

  return (
    <Form method="post" id="contact-form">
      {/* existing code */}

      <p>
        <button type="submit">Save</button>
        <button
          type="button"
          onClick={() => {
            navigate(-1);
          }}
        >
          Cancel
        </button>
      </p>
    </Form>

dataRouter

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

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

相关推荐
虾球xz2 分钟前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇8 分钟前
HTML常用表格与标签
前端·html
疯狂的沙粒11 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员27 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐29 分钟前
前端图像处理(一)
前端
程序猿阿伟37 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒38 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪1 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背1 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express