TypeError：router.post 不是函数 NextJS

Question

我在一个项目中使用 NextJS 和 NodeJS。我正在尝试创建一个登录页面。如果发生错误，我希望用户被重定向/留在登录页面，否则将他们重定向到配置文件/仪表板。 NodeJS 的后端，即我发送数据的 API，会给我一个包含访问令牌的响应，我可以将其保存在本地存储中。 所以问题是，每当我点击提交按钮时。错误弹出：

Uncaught (in promise) TypeError: router.post is not a function
at _callee$ (signin.js?78fe:58:14)
at tryCatch (runtime.js?ecd4:45:16)
at Generator.invoke [as _invoke] (runtime.js?ecd4:274:1)
at prototype.<computed> [as next] (runtime.js?ecd4:97:1)
at asyncGeneratorStep (_async_to_generator.mjs?e376:3:1)
at _next (_async_to_generator.mjs?e376:25:1)

我做错了什么？ 使用 NestJS 版本 12。 登录组件：

import { useState } from "react";
import { FcGoogle } from "react-icons/fc";
import { useAuthContext } from "../context/authContext";
import { useRouter } from "next/router";

import Link from "next/link";

export default function SignInForm() {
  const { setIsAuthed, setToken } = useAuthContext();
  var router = useRouter();
  var [input, setInput] = useState({
    user_email: "",
    user_password: "",
  });
  const handleChange = (event) => {
    input[event.target.name] = event.target.value;
    setInput(input);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    const JSONdata = JSON.stringify(input);

    // API endpoint where we send form data.
    const endpoint = "http://localhost:3080/v1/login";

    // Form the request for sending data to the server.
    const options = {
      // The method is POST because we are sending data.
      method: "POST",
      // Tell the server we're sending JSON.
      headers: {
        "Content-Type": "application/json",
      },
      // Body of the request is the JSON data we created above.
      body: JSONdata,
    };

    // Send the form data to our forms API on Vercel and get a response.
    try {
      const response = await fetch(endpoint, options);
      console.log(response);
      setIsAuthed(true);
      router.post("/dashboard");
    } catch (error) {
      console.log(error);
      setIsAuthed(false);
      router.post("/signin");
    }
  };
  return (
    <>
      <Box
        display='flex'
        flexDir='column'
        justifyContent='center'
        height='88vh'
      >
        <Box
          boxShadow='md'
          borderRadius='md'
          paddingTop='10px'
          paddingRight='10px'
          paddingLeft='10px'
          paddingBottom='20px'
          width={{ base: "90%", md: "50%", lg: "50%", xl: "50%" }}
          marginLeft='auto'
          marginRight='auto'
        >
          <Box>
            <Heading textAlign='center' size='lg' fontWeight={700}>
              Sign In
            </Heading>
          </Box>
          <Box width='100%'>
            <form onSubmit={handleSubmit}>
              <FormControl id='email' isRequired>
                <FormLabel fontSize='18px'>Email address</FormLabel>
                <Input
                  type='email'
                  placeholder='type your email here'
                  _focus={{
                    zIndex: "0",
                    borderColor: "#3182ce",
                  }}
                  name='user_email'
                  value={input.email}
                  onChange={handleChange}
                />
              </FormControl>

              <FormControl id='password' isRequired>
                <FormLabel fontSize='18px'>Password</FormLabel>
                <Input
                  type='password'
                  placeholder='type your password here'
                  _focus={{
                    zIndex: "0",
                    borderColor: "#3182ce",
                  }}
                  name='user_password'
                  value={input.password}
                  onChange={handleChange}
                />
              </FormControl>
              <Box
                as='button'
                mt='2%'
                p={2}
                color='white'
                fontWeight='bold'
                borderRadius='md'
                bgGradient='linear(to-r, teal.500,green.500)'
                _hover={{
                  bgGradient: "linear(to-r, red.500, yellow.500)",
                }}
                type='submit'
                value='Submit'
              >
                Submit
              </Box>
            </form>
          </Box>

          <Box textAlign='center'>
            <Text>Or</Text>
          </Box>
          <Box marginRight='auto' marginLeft='auto'>
            <Center>
              <Button
                w={"full"}
                maxW={"md"}
                variant={"outline"}
                leftIcon={<FcGoogle />}
              >
                <Text>Sign In with Google</Text>
              </Button>
            </Center>
          </Box>
          <Box textAlign='center'>
            <Text fontSize='lg' fontWeight={700}>
              Don&apos;t have an account? <Link href='/'>Sign Up here!</Link>
            </Text>
          </Box>
        </Box>
      </Box>
    </>
  );
}

Answer 1

使用 router.push 代替 router.post

 try {
      const response = await fetch(endpoint, options);
      console.log(response);
      setIsAuthed(true);
      router.push("/dashboard"); //changes
    } catch (error) {
      console.log(error);
      setIsAuthed(false);
      router.push("/signin"); //changes
    }