学习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 (<divonClick={() => {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")}><divclassName={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><divclassName="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 (<divclassName="button"onClick={() => {navigate("/demo/about");}}>about</div>);
}

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