学习react-router-v6 : useSearchParams、Outlet、Navigate

学习react-router-v6

useSearchParams

类型:hook
用于对search做一些处理。
const [searchParams, setSearchParams] = useSearchParams();
比如访问路径/index?nav=123,const nav = searchParams.get("nav"); // 这个对象的用法大部分都需要通过原型链上的api。可以获取search参数。
当然也可以用setSearchParams修改search，触发组件rerender。
下面的一个示例，就是通过获取参数来做路由重定向。

import React from "react";
import { Navigate } from "react-router";
import { useSearchParams } from "react-router-dom";

function NavigateComp() {
  const [searchParams, setSearchParams] = useSearchParams();

  console.log("searchParams", searchParams);

  const nav = searchParams.get("nav"); // 这个对象的用法大部分都需要通过原型链上的api。

  console.log("nav", nav);

  if (!nav) {
    return (
      <div
        onClick={() => {
          setSearchParams({
            nav: "/demo",
          }); // 修改 search 会触发组件rerender
        }}
      >
        404
      </div>
    );
  } else {
    // Navigate 组件有点类似以前的Redirect组件，可以说是useNavigate的组件表现。
    return <Navigate to={nav} replace />;
  }
}

export default NavigateComp;

Outlet

如果你用过vue-router的router-view组件你大概就知道这是什么东西了。
这个是一个组件，你可以将路由配置在外面写好，然后这个组件就可以放在某个地方进行路由匹配，匹配到的嵌套路由就会渲染在这个组件所在的地方。
比如路由配置。

 path: "/learn",
 element: <Learn />,
 children: [
   {
     path: "outlet",
     element: <OutletComp />,
   },
]

组件

import classNames from "classnames";
import React from "react";
import { Outlet, useNavigate } from "react-router";

function Learn() {
  const navigate = useNavigate();
  return (
    <div>
      <div className={classNames("box")}>
        <div
          className={classNames("button")}
          onClick={() => {
            navigate("/learn/outlet");
          }}
        >
          navigate outlet
        </div>
      </div>
      Learn
      <Outlet />
      {/* 作用上可以类比vueRouter的router-view组件 */}
    </div>
  );
}

export default Learn;

useOutletContext

类型：hook
与上面的组件搭配，用于提供上下文。
父组件

function Demo() {
  const navigate = useNavigate();

  const providerData = {
    a: 1,
  }; // 提供上下文

  return (
    <>
      <div>Demo</div>
      <div
        className="button"
        onClick={() => {
          navigate("/demo/about");
        }}
      >
        about
      </div>
      <Outlet context={providerData} />
    </>
  );
}

子组件

import React from "react";
import { useOutletContext} from "react-router";

function Children() {

  const { a } = useOutletContext<{
    a: number;
  }>(); // 拿到局部上下文的数据

  return (
    <>
      <div>动态路由的参数 {params.tab || "useParams"}</div>
      <div>context {a}</div>
    </>
  );
}

export default Children;

Navigate

这是一个组件。
可以认为是useNavigate的组件用法。
可以做重定向，v6版本不再提供Redirect组件。

import React from "react";
import { Navigate } from "react-router";

function NavigateComp() {
	// Navigate 组件有点类似以前的Redirect组件，可以说是useNavigate的组件表现。
    return <Navigate to={nav} replace />;
}

export default NavigateComp;

useNavigate

这个hook不算新的，很常用，用于编程式跳转路由。

function Demo() {
  const navigate = useNavigate();
  
  return (
    <div
       className="button"
       onClick={() => {
         navigate("/demo/about");
       }}
     >
       about
     </div>
  );
}

学习会让你变得更加自信。