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

相关推荐
YBN娜6 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=6 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck10 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!31 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。36 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼42 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
晴天飛 雪1 小时前
React 守卫路由
前端框架·reactjs