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 使用起来比较简单,做路由管理、跳转等等。

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪8 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪8 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试