携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

前言

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

开开心心学技术大法~~

来了来了，他真的来了~

正文

React18用上了，React Router6你用上了吗？

react-router组成

router有三部分

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

其中react-router是react-router-dom和react-router-native的核心，一般不作为单独包引入。

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

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

react-router-dom

组成

• components
• hooks
• routers
• utils

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

hooks

0. useHref

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

   比如：

   父组件

   <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;
   ​
   

1. useInRouterContext

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

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

2. useLinkClickHandler

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

   一般用于重写Link的onClick方法

   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;
   

3. useLinkPressHandler

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

4. 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 (
       // ...
     );
   }
   

5. useMatch

   传入一个PathPattern | string

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

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

     {
         "params": {},
         "pathname": "/demo2",
         "pathnameBase": "/demo2",
         "pattern": {
             "path": "demo2",
             "caseSensitive": false,
             "end": true
         }
     }
     

   • 如果不匹配，返回null

6. useNavigate

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

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

   • navigate参数

     • 第一个参数是要跳转的路径，参考Link的to；也可以是历史堆栈信息，比如-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>;
   }
   

7. useNavigationType

   返回进入该路由的navigation方式，比如pop、push、replace

8. 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>;
   }
   

9. 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>
     )
   }
   

10. 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>
      );
    }
    

11. useResolvedPath

    跟useHref类似，入参为Link的to

    返回一个解析后的path object，包含pathname、search等参数

    如：

    {
        "pathname": "/demo2",
        "search": "",
        "hash": ""
    }
    

12. 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;
    }
    

13. 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>
      );
    }
    

结语

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

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

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

• vscode最牛插件分享，只有你想不到，没有vscode办不到

• 手写webpack loader是什么样的体验？

• 看完就会的webapck loader编写教程

• 六十行代码阐述webpack-core的思想

• 因为懒，我写了个vscode插件

• 为了生成目录结构方便，我写了个vscode插件

• 我用30行代码实现了简易的husky

• 抛弃HTML Snippets，拥抱Emmet成为html大师！