React Router v7数据模式使用指南

React Router官方文档：https://reactrouter.com.cn/

以下仅为 * 数据模式 * 的使用笔记

安装当前版本v7

js 复制代码

npm install react-router

使用createBrowserRouter创建路由配置，支持普通路由和嵌套路由。router/index.js

javascript 复制代码

import { createBrowserRouter } from "react-router";
import Index from "@/pages/Index";
import User from "@/page/User";
import Login from "@/page/Login";

const router = createBrowserRouter([
    // 普通路由
    {
        path: "/",
        Component: Index,
    },
    // 嵌套路由
    {
        path: "/user",
        Component: User,
        children: [
            {
                // path: "login",
                index: true,// 默认路由
                Component: Login,
            },
            {
                path: "register",
                Component: Register,
            },
        ]
    }
]);

export default router;

使用RouterProvider绑定路由 main.js

javascript 复制代码

import { RouterProvider } from "react-router/dom";
import router from "./router/index.js";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <Provider store={store}>
      {/* <App /> */}
      {/* 绑定路由 */}
      <RouterProvider router={router} />
    </Provider>
  </StrictMode>
);

组件内通过Outlet展示子路由，Link/NavLink实现导航

javascript 复制代码

import { Outlet, Link  } from "react-router";

export default function User() {
  return (
    <div>
      <h1>用户</h1>
      <Link to="/user">登录</Link>
      <Link to="/user/register">注册</Link>
      {/* 二级路由出口 */}
      <Outlet />
    </div>
  );
}

路由导航

4.1 Link

javascript 复制代码

import { Link } from "react-router";

<Link to="/">首页</Link>
<Link to="/about">关于</Link>

4.2 NavLink 需要渲染活跃和待处理状态的导航链接

javascript 复制代码

import { NavLink } from "react-router";

<NavLink
  to="/messages"
  className={({ isActive, isPending, isTransitioning }) =>
    [
      isPending ? "pending" : "",
      isActive ? "active" : "",
      isTransitioning ? "transitioning" : "",
    ].join(" ")
  }
>
  Messages
</NavLink>

4.3 Form

javascript 复制代码

<Form action="/search">
  <input type="text" name="q" />
</Form>

4.4 重定向redirect

javascript 复制代码

import { redirect } from "react-router";

export async function loader({ request }) {
  let user = await getUser(request);
  if (!user) {
    return redirect("/login");
  }
  return { userName: user.name };
}

4.5 编程式 useNavigate

javascript 复制代码

import { useNavigate } from "react-router";

export function useLogoutAfterInactivity() {
  let navigate = useNavigate();

  useFakeInactivityHook(() => {
    // navigate("/logout");
    // 使用navigate函数并设置replace为true来替换当前历史记录
    navigate("/logout", { replace: true });
  });
}

4.6 路由导航传参 useSearchParams 、useParams

javascript 复制代码

// 4.6.1 searchParams传参
navigate("/user?id=123");

// 取
const [params]= useSearchParams();
let id= params.get("id");

// 4.6.2 params传参
navigate("/user/123");

// 取
const [params]= useParams();
let id= params.id;

Hooks解析

useLocation：返回当前的 Location，包含有关 URL 路径的信息，以及可能的一些任意状态和键。

javascript 复制代码

// 属性
{
    "pathname": "/index", // URL 路径名，以 / 开头。
    "search": "", // URL 查询字符串，以 ? 开头。
    "hash": "", // URL 片段标识符，以 # 开头。
    "state": null, // 与此 location 关联的任意数据值。
    "key": "f5ecz0os" // 与此 location 关联的唯一字符串。 可用于在其他存储 API（如 localStorage）中安全地存储和检索数据。注意：此值在初始 location 上始终为 "default"。
}