如何解决“useActionData 必须在数据路由器内使用”的问题。混音中

Question

`export default function Login() {
  const isSubmitting = useIsSubmitting("loginForm");
  const response: any = useActionData();

  if (response && response.status != 200) {
    toast.error(response.error, {
      id: response.error,
    });
  }

  return (
    <div
      style={{
        height: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Card variant="outlined" sx={{ width: "100%", maxWidth: 300, p: 2 }}>
        <ValidatedForm validator={loginValidator} method="post" id="loginForm">
          <Typography
            variant="h5"
            style={{ textAlign: "center", fontWeight: "bold" }}
          >
            LOGIN
          </Typography>
          <CustomTextField name="username" label="Username" />
          <CustomPasswordField name="password" label="Password" />
          <Button
            disabled={isSubmitting}
            style={{ margin: "10px 0" }}
            fullWidth
            variant="contained"
            type="submit"
              >
                {!isSubmitting ? "Login" : <CircularProgress />}
              </Button>
            </ValidatedForm>
          </Card>
        </div>
      );
    }`

这是我的login.tsx，当我导航到 localhost:3000/auth/login 时，出现此错误

Error: useActionData must be used within a data router.  See https://reactrouter.com/routers/picking-a-router.
    at Object.invariant [as UNSAFE_invariant] (/home/dulanja/Adavii/11StreetSite/node_modules/@remix-run/router/history.ts:494:11)
    at useDataRouterState (/home/dulanja/Adavii/11StreetSite/node_modules/remix-validated-form/node_modules/@remix-run/react/node_modules/react-router/lib/hooks.tsx:838:3)
    at Object.useActionData (/home/dulanja/Adavii/11StreetSite/node_modules/remix-validated-form/node_modules/@remix-run/react/node_modules/react-router/lib/hooks.tsx:933:15)
    at useActionData (/home/dulanja/Adavii/11StreetSite/node_modules/remix-validated-form/node_modules/@remix-run/react/dist/components.js:702:25)
    at useErrorResponseForForm (/home/dulanja/Adavii/11StreetSite/node_modules/remix-validated-form/src/internal/hooks.ts:31:22)
    at ValidatedForm (/home/dulanja/Adavii/11StreetSite/node_modules/remix-validated-form/src/ValidatedForm.tsx:265:24)
    at renderWithHooks (/home/dulanja/Adavii/11StreetSite/node_modules/react-dom/cjs/react-dom-server.node.development.js:5724:16)
    at renderIndeterminateComponent (/home/dulanja/Adavii/11StreetSite/node_modules/react-dom/cjs/react-dom-server.node.development.js:5797:15)
    at renderElement (/home/dulanja/Adavii/11StreetSite/node_modules/react-dom/cjs/react-dom-server.node.development.js:6012:7)
    at renderNodeDestructiveImpl (/home/dulanja/Adavii/11StreetSite/node_modules/react-dom/cjs/react-dom-server.node.development.js:6170:11)

我使用了这个命令，npm install react-router-dom@latest @types/react-router-dom@latest，这在不同的分支中运行良好。当我合并到主分支后，出现了上面的错误...我再次使用上面的命令，但我的错误没有解决。

Answer 1

在 v6.4 中，引入了支持新的数据 API 的新路由器：

• 创建浏览器路由器
• 创建内存路由器
• 创建HashRouter
• 创建静态路由器

您必须在数据路由器内使用

useActionData()

钩子。