如何在React Router v6中将函数传递给state

Question

当我单击其中一条路线 ( ) 的链接时，我想在两条路线之间共享状态NewUser。我想要共享的状态和修改它的逻辑都保存在路由中Users。我想将改变状态的逻辑传递给路由NewUsers。

当我将字符串传递给 router 中的状态对象时Link，我可以在NewUsers组件中访问它。但是，null当我传递一个函数时，我得到了。

我知道我可以使用 context/redux，但我更愿意这样做。

Users路线：

function Users() {
  const [users, setUsers] = useState([]);

  return (
      <Card sx={{ padding: "2rem", mt: "2rem" }}>
        <MDBox
          display="flex"
          flexDirection="row"
          justifyContent="space-between"
        >
          <MDTypography variant="body2">{`You currently have ${users.length} users`}</MDTypography>
          <MDButton variant="gradient" color="info" size="small">
            <Link to="/settings/users/new-user" state={setUsers: setUsers}> //this is how I want to pass the state
              <MDBox
                display="flex"
                alignItems="center"
                color="white"
                fontWeight="normal"
              >
                <Icon>add</Icon>&nbsp; Add New User
              </MDBox>
            </Link>
          </MDButton>
        </MDBox>
    </Card>

NewUsers路线：

function NewUser({history}) {

  const location = useLocation();

  const saveChanges = (e) => {
    location.state.setUsers({
      fname: values.firstName,
      lname: values.lname,
      email: values.email,
    });
    navigate("/settings/users");
  };

  return(
    <MDBox py={3} mb={20} height="62vh">
        <Grid
          container
          justifyContent="center"
          alignItems="center"
          sx={{ height: "100%", mt: 0 }}
        >
          <Grid item xs={12} lg={12}>
            <Formik
              initialValues={initialValues}
              validationSchema={currentValidation}
              onSubmit={(values) => {
                setValues(values);
              }}
            >
              {({ values, errors, touched, isSubmitting }) => (
                <Form id={formId} autoComplete="off">
                  <Card sx={{ height: "100%", width: "100%" }}>
                    <MDBox px={3} py={4}>
                      <MDBox display="flex">
                        <ButtonWrapper
                          fullWidth={false}
                          handleClick={saveChanges}
                        >
                          Save Changes
                        </ButtonWrapper>
                      </MDBox>
                      <MDBox>
                        {getStepsContent({
                          values,
                          touched,
                          formField,
                          errors,
                        })}
                      </MDBox>
                    </MDBox>
                  </Card>
                </Form>
              )}
            </Formik>
          </Grid>
        </Grid>
      </MDBox>
    )
}

路由代码：

  {
    type: "collapse",
    name: "Settings",
    key: "settings",
    icon: <Icon fontSize="small">settings</Icon>,
    collapse: [
      {
        name: "Users",
        key: "users",
        route: "/settings/users",
        // icon: <Icon fontSize="small">users</Icon>,
        component: <Users />,
      },
      {
        name: "Companies",
        key: "companies",
        route: "/settings/companies",
        component: <Companies />,
      },
      {
        name: "Billing",
        key: "billing",
        route: "/settings/billing",
        component: <Billing />,
      },
      {
        name: "Integrations",
        key: "integrations",
        route: "/settings/integrations",
        component: <Integrations />,
      },
    ],
  },
  {
    name: "New User",
    key: "new user",
    route: "/settings/users/new-user",
    noCollapse: true,
    component: <NewUser />,
  },
  {
    type: "collapse",
    name: "Sign Out",
    key: "signout",
    route: "/sign-out",
    icon: <Icon fontSize="small">logout</Icon>,
    component: <SignOut />,
    noCollapse: true,
  },
];

渲染路线的函数：

  const getRoutes = (allRoutes) =>
    allRoutes.map((route) => {
      if (route.collapse) {
        return getRoutes(route.collapse);
      }
      if (route.route) {
        return <Route exact path={route.route} element={route.component} key={route.key} />;
      }
      return null;
    });

    <Routes>
      {getRoutes(routes)}
      {/* <Route path="*" element={<Navigate to="/dashboard" />} /> */}
      <Route path="*" element={<Console />} />
    </Routes>

Answer 1

通过组件发送的状态值Link需要是 JSON 可序列化的。Javascript 函数不可序列化。我建议不要尝试将函数传递到目标组件，而是将状态提升到共同的祖先，以便两个组件都可以访问状态和回调函数。

我建议使用 React 上下文来保存users状态并提供状态值和更新器函数来添加用户对象。react-router-dom有一种“内置”方法可以通过布局路由组件来实现此目的，该组件呈现Outlet包装嵌套路由的组件。

例子：

import { Outlet } from 'react-router-dom';

const UsersProvider = () => {
  const [users, setUsers] = useState([]);

  const addUser = (user) => {
    setUsers((users) => users.concat(user));
  };

  return <Outlet context={{ users, addUser }} />;
};

...

<Routes>
  ...
  <Route path="/settings/users" element={<UsersProvider />}>
    <Route index element={<Users />} />
    <Route path="new-user" element={<NewUser />} />
  </Route>
  ...
</Routes>

用户

const Users = () => {
  const { users } = useOutletContext();

  return (
    <Card sx={{ padding: "2rem", mt: "2rem" }}>
      <Box display="flex" flexDirection="row" justifyContent="space-between">
        <Typography variant="body2">
          You currently have {users.length} users
        </Typography>
        <Button variant="gradient" color="info" size="small">
          <Link to="/settings/users/new-user">
            <Box
              display="flex"
              alignItems="center"
              color="white"
              fontWeight="normal"
            >
              <Icon>add</Icon>
              &nbsp; Add New User
            </Box>
          </Link>
        </Button>
      </Box>
    </Card>
  );
};

新用户

function NewUser({history}) {
  const navigate = useNavigate();
  const { addUser } = useOutletContext();

  const saveChanges = (e) => {
    addUser({
      fname: values.firstName,
      lname: values.lname,
      email: values.email,
    });
    navigate("/settings/users");
  };

  return(
    <MDBox py={3} mb={20} height="62vh">
        <Grid
          container
          justifyContent="center"
          alignItems="center"
          sx={{ height: "100%", mt: 0 }}
        >
          <Grid item xs={12} lg={12}>
            <Formik
              initialValues={initialValues}
              validationSchema={currentValidation}
              onSubmit={(values) => {
                setValues(values);
              }}
            >
              {({ values, errors, touched, isSubmitting }) => (
                <Form id={formId} autoComplete="off">
                  <Card sx={{ height: "100%", width: "100%" }}>
                    <MDBox px={3} py={4}>
                      <MDBox display="flex">
                        <ButtonWrapper
                          fullWidth={false}
                          handleClick={saveChanges}
                        >
                          Save Changes
                        </ButtonWrapper>
                      </MDBox>
                      <MDBox>
                        {getStepsContent({
                          values,
                          touched,
                          formField,
                          errors,
                        })}
                      </MDBox>
                    </MDBox>
                  </Card>
                </Form>
              )}
            </Formik>
          </Grid>
        </Grid>
      </MDBox>
    )
}