无法定义 navigate = useNavigate()

Question

我正在尝试运行此代码：

  const navigate = useNavigate()
  <div>
    <button onClick={() => navigate("/")}>CLICK</button>
    <h1>HATS PAGE</h1>
  </div>
);

但不知何故 const navigate = useNavigate() 给了我 Parsing error: Unexpected token

谁能帮我解决这个问题？

Answer 1

您不能将定义变量的语句放在 JSX 表达式的中间。

首先定义变量。然后做你的 JSX。

const navigate = useNavigate();

return (
    <div>
        <button onClick={() => navigate("/")}>CLICK</button>
        <h1>HATS PAGE</h1>
    </div>
);

Answer 2

需要在 React 功能组件的顶层调用挂钩。

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

  return (
    <div>
    <button onClick={() => navigate("/")}>CLICK</button>
      <h1>HATS PAGE</h1>
    </div>
  );
}

无法定义 navigate = useNavigate()

unable to define navigate = useNavigate()

javascript

reactjs

react-router-dom