Javascript 如何使用 Outlet 与 React Router Dom 进行布局

如果我没有理解错的话，您是在问路由的子/嵌套路由如何将page和img的值传递给父布局路由，然后它可以呈现这些值.

您可以使用布局路由来实现这一点，其中包含一些状态和回调，这些状态和回调通过上下文提供程序向下传递，而包装器组件则访问上下文并向上传送值.

示例:

const AuthLayout = () => {
  const [{ img, page }, setState] = React.useState({});

  const setPageData = React.useCallback(
    ({ img, page }) => setState({ img, page }),
    []
  );
  
  return (
    <main className={`auth-layout ${page}`}>
      <Outlet context={{ setPageData }} />
      <div className="images">
        <img src={img} alt={page} />
        <img src={Logo} alt="Logo" className="logo" />
      </div>
    </main>
  );
};

const withPageData = (Component, { img, page }) => (props) => {
  const { setPageData } = useOutletContext();

  useEffect(() => {
    setPageData({ img, page });
  }, [img, page, setPageData]);

  return <Component {...props} />;
}

import ForgotImg from "assets/img/forgot-password.svg";

...

const ForgotPassword = (props) => {
  ...

  return (
    ...
    <form onClick={sendPassword}>

    </form>
    ...
  );
};

const pageData = { page: "forgot-password", img: ForgotImg };

export default withPageData(ForgotPassword, pageData);

<Route element={<AuthLayout />}>
  <Route element={<LoginPage />} path="/login" />
  <Route element={<RegisterPage />} path="/register" />
  <Route element={<ForgotPassword />} path="/forgotPassword" />
  <Route element={<Verify />} path="/forgotpassword/verify" />
</Route>