在将 React 路由器更新到 v7 时，为预期返回 void 的属性提供 Promise 返回函数

Question

我尝试将react-router更新到v7。但得到

 30:21  error  Promise-returning function provided to attribute where a void return was expected  @typescript-eslint/no-misused-promises

我明白了

import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
import IconButton from "@mui/material/IconButton";
import { useNavigate } from "react-router-dom";

fonction foo() {
  const navigate = useNavigate();
return (
  <IconButton
     color="primary"
     aria-label="back to Home page"
     onClick={() => navigate("/")}
  >
    <ArrowBackIosIcon fontSize="large" />
  </IconButton>
);
}

我不知道如何解决这个 eslint 问题，导航不是一个承诺

Answer 1

function Foo() {
  const navigate = useNavigate();

  const handleNavigate = () => {
    navigate("/");
  };

  return (
    <IconButton
      color="primary"
      aria-label="back to Home page"
      onClick={handleNavigate}
    >
      <ArrowBackIosIcon fontSize="large" />
    </IconButton>
  );
}

您需要将导航调用包装在显式返回 void 的函数中。这会让 linter 满意。

或者试试这个

function Foo() {
  const navigate = useNavigate();

  return (
    <IconButton
      color="primary"
      aria-label="back to Home page"
      onClick={() => {
        navigate("/"); // Explicitly invoke navigate
        return; // Ensure the function returns void
      }}
    >
      <ArrowBackIosIcon fontSize="large" />
    </IconButton>
  );
}