Javascript 有没有办法在 React Router 6 动作函数中访问 React 上下文数据

如果在react 树中呈现比RouterProvider组件更高的APPContextProvider组件，则组件呈现RouterProvider可以访问APPContext值，并在实例化路由时将其传递给authAction函数.

示例:

Index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import APP from "./APP";
import APPContextProvider from "./app.context";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <APPContextProvider>
      <APP />
    </APPContextProvider>
  </StrictMode>
);

APP

Update the authAction to curry a passed appContext argument and return the action function. Access appContext via the useAPPContext hook and pass to the route action creator.

import {
  createBrowserRouter,
  RouterProvider,
  json,
  redirect,
} from "react-router-dom";
import { useAPPContext } from "./app.context";

const authAction = (appContext) => async ({ request }) => {
  const { setCurrentUser } = appContext;
  const data = await request.formData();
  const userData = {
    email: data.get("email"),
    password: data.get("password")
  };
  if (!userData.email || !userData.password) {
    throw json(
      { message: "Please provide all values" },
      { status: 400, statusText: "Please provide all values" }
    );
  }
  try {
    const { data } = await axios.post("/api/auth/login", userData);
    setCurrentUser(data);
    return redirect("/");
  } catch (error) {
    return error.response.data.msg;
  }
};

export default function APP() {
  const appContext = useAPPContext();

  const router = createBrowserRouter([
    ...
    {
      path: "/login",
      element: <Login />,
      action: authAction(appContext)
    },
    ...
  ]);

  return <RouterProvider router={router} />;
}