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

相关推荐
京东零售技术几秒前
Taro on Harmony :助力业务高效开发纯血鸿蒙应用
前端·开源
前端大白话16 分钟前
救命!这10个Vue3技巧藏太深了!性能翻倍+摸鱼神器全揭秘
前端·javascript·vue.js
嘻嘻嘻嘻嘻嘻ys18 分钟前
《Vue 3全栈架构实战:Vite工程化、Pinia状态管理与Nuxt 3深度解析》
前端·后端
前端大白话20 分钟前
前端人必看!10个JavaScript“救命”技巧,让你告别加班改Bug
前端·javascript·程序员
cg501730 分钟前
Vue回调函数中的this
前端·javascript·vue.js
前端太佬32 分钟前
从零到一实现扫码登录:一个前端菜鸟的踩坑实录
前端·javascript·架构
yuanmenglxb200443 分钟前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
爱编程的鱼43 分钟前
如何让 HTML 文件嵌入另一个 HTML 文件:详解与实践
前端·html
_09271 小时前
Vue 2 与 Vue 3 的核心区别及 Vue 3 新特性详解
前端
David凉宸1 小时前
一文带你使用Vue完成移动端(apk)项目
前端