likes
comments
collection

React Router 6:hooks篇

作者站长头像
站长
· 阅读数 14

前言

大家好,我是小阵 🔥,一路奔波不停的码字业务员 如果喜欢我的文章,可以关注 ➕ 点赞,与我一同成长吧~😋 加我微信:zzz886885,邀你进群,一起学习交流,摸鱼学习两不误🌟

开开心心学技术大法~~

React Router 6:hooks篇

来了来了,他真的来了~

正文

React18用上了,React Router6你用上了吗?

react-router组成

router有三部分

  • react-router
  • react-router-dom
  • react-router-native

其中react-routerreact-router-domreact-router-native的核心,一般不作为单独包引入。

如果是web端,可直接引用react-router-dom

如果是react-native端,可以使用react-router-native

react-router-dom

组成

  • components
  • hooks
  • routers
  • utils

因为篇幅太长,昨天写了React Router6:components篇,今天写下hooks

hooks

  1. useHref

    通常用于自定义Link中,接收一个Linkto属性,返回一个完整的路由路径

    比如:

    父组件

    <SelfLink to="/demo2" key='dom1'>dom1</SelfLink>
    

    自定义路由组件

    import React from "react";
    import { Link, useHref } from "react-router-dom";
    ​
    function SelfLink({ to, ...props }) {
      const href = useHref(to)
      console.log('selflink hooks', href, to) // selflink hooks #/demo2 /demo2
      return (
        <Link
          to={to}
          {...props}
        />
      );
    }
    export default SelfLink;
    ​
    
  2. useInRouterContext

    如果该组件渲染在Router内部,则为true,否则为false

    通常用于在第三方插件中判断是否渲染于React环境中

  3. useLinkClickHandler

    自定义Link中基于navigation返回一个onClick点击事件处理函数

    一般用于重写LinkonClick方法

    import React from "react";
    import { Link, useLinkClickHandler } from "react-router-dom";
    ​
    function SelfLink({ to, replace, state, target, ...props }) {
      let handleClick = useLinkClickHandler(to, {
        replace,
        state,
        target,
      });
    ​
      return (
        <Link
          to={to}
          onClick={(event) => {
            if (!event.defaultPrevented) {
              handleClick(event);
            }
          }}
          {...props}
        />
      );
    }
    export default SelfLink;
    
  4. useLinkPressHandler

    同上面的useLinkClickHandler,唯一不同的是,返回的是onPress按压事件处理函数

  5. useLocation

    返回当前location的object,常用于监听该location object用于触发一些副作用

    比如:

    import * as React from 'react';
    import { useLocation } from 'react-router-dom';
    ​
    function App() {
      let location = useLocation();
      // 返回的location:{
      // "pathname": "/demo2",
      // "search": "",
      // "hash": "",
      // "state": null,
      // "key": "n4yxhbsy"
      // }
    ​
      React.useEffect(() => {
        ga('send', 'pageview');
      }, [location]);
    ​
      return (
        // ...
      );
    }
    
  6. useMatch

    传入一个PathPattern | string

    返回相对于当前位置的给定路径的路线匹配数据。

    • 如果匹配返回匹配到的路由信息,比如

      {
          "params": {},
          "pathname": "/demo2",
          "pathnameBase": "/demo2",
          "pattern": {
              "path": "demo2",
              "caseSensitive": false,
              "end": true
          }
      }
      
    • 如果不匹配,返回null

  7. useNavigate

    返回一个navigate,允许你通过该navigate进行编程式导航

    不过编程式导航一般用react-router-domhistory来进行编程式导航

    • navigate参数

      • 第一个参数是要跳转的路径,参考Linkto;也可以是历史堆栈信息,比如-1表示后退一个路由
      • 第二个参数参考Link的其他参数,比如{ replace, state }

    比如:

    import { useNavigate } from "react-router-dom";
    ​
    function SignupForm() {
      let navigate = useNavigate();
    ​
      async function handleSubmit(event) {
        event.preventDefault();
        await submitForm(event.target);
        navigate("../success", { replace: true });
      }
    ​
      return <form onSubmit={handleSubmit}>{/* ... */}</form>;
    }
    
  8. useNavigationType

    返回进入该路由的navigation方式,比如poppushreplace

  9. useOutletContext

    用于子路由组件中

    配合Outlet标签上的context属性使用

    比如父路由组件中:

    function Parent() {
      const [count, setCount] = React.useState(0);
      return <Outlet context={[count, setCount]} />;
    }
    

    子路由组件中

    import { useOutletContext } from "react-router-dom";
    ​
    function Child() {
      const [count, setCount] = useOutletContext();
      const increment = () => setCount((c) => c + 1);
      return <button onClick={increment}>{count}</button>;
    }
    
  10. useOutlet

    返回outlet组件,在jsx中一般没有使用的必要

    以下使用方式相同

    import { useOutlet } from "react-router-dom";
    ​
    function A(){
      const outlet = useOutlet()
      return (
        <div>
          {outlet}
        </div>
      )
    }
    
    import { Outlet } from "react-router-dom";
    ​
    function A(){
      return (
        <div>
          <Outlet />
        </div>
      )
    }
    
  11. useParams

    返回路由上带的search参数

    import * as React from 'react';
    import { Routes, Route, useParams } from 'react-router-dom';
    ​
    function ProfilePage() {
      // Get the userId param from the URL.
      let { userId } = useParams();
      // ...
    }
    ​
    function App() {
      return (
        <Routes>
          <Route path="users">
            <Route path=":userId" element={<ProfilePage />} />
            <Route path="me" element={...} />
          </Route>
        </Routes>
      );
    }
    
  12. useResolvedPath

    useHref类似,入参为Linkto

    返回一个解析后的path object,包含pathnamesearch等参数

    如:

    {
        "pathname": "/demo2",
        "search": "",
        "hash": ""
    }
    
  13. useRoutes

    功能类似于Routes,依据传入的routes json返回所有路由信息

    如:

    import * as React from "react";
    import { useRoutes } from "react-router-dom";
    ​
    function App() {
      let element = useRoutes([
        {
          path: "/",
          element: <Dashboard />,
          children: [
            {
              path: "messages",
              element: <DashboardMessages />,
            },
            { path: "tasks", element: <DashboardTasks /> },
          ],
        },
        { path: "team", element: <AboutPage /> },
      ]);
    ​
      return element;
    }
    
  14. useSearchParams

    setState的结构一样,返回一个获取当前路由信息的search params信息,和一个改变该信息的函数

    import * as React from "react";
    import { useSearchParams } from "react-router-dom";
    ​
    function App() {
      let [searchParams, setSearchParams] = useSearchParams();
    ​
      function handleSubmit(event) {
        event.preventDefault();
        // The serialize function here would be responsible for
        // creating an object of { key: value } pairs from the
        // fields in the form that make up the query.
        let params = serializeFormQuery(event.target);
        setSearchParams(params);
      }
    ​
      return (
        <div>
          <form onSubmit={handleSubmit}>{/* ... */}</form>
        </div>
      );
    }
    

结语

如果文章真的有帮到你,希望可以多多点赞、收藏、关注支持一波呀!!小阵会很开心哒~

文章如有错误或不严谨之处,还望指出,感谢感谢!!!

React Router 6:hooks篇

往期好文推荐「我不推荐下,大家可能就错过了史上最牛逼vscode插件集合啦!!!(嘎嘎~)😄」