react-router@6调用navigate.goBack()报错无法返回上一页

你遇到的Uncaught TypeError: navigate.goBack is not a function是React Router v6的API变更导致的：v5版本中navigate对象上的goBack()方法在v6版本已被完全移除，沿用旧写法就会触发类型错误。

React Router v6的历史导航调用方式和浏览器原生History API对齐：

• 返回上一页：navigate(-1)
• 前进到历史栈下一页：navigate(1)
• 跳转指定路径：navigate('/目标路由地址')

除了API调用错误之外，现有代码还有3个隐性问题：

• 导航跳转逻辑写在了fetch请求的链式调用外面，会不等POST请求提交完成、onAddReview状态更新执行就直接跳页，很容易出现评价提交失败、列表不刷新的问题
• 代码中使用了useParams、useState两个Hook，但是没有做导入声明，运行时会直接报「未定义」错误
• 表单提交按钮用了class="submit"属性，React中DOM元素的类名属性需要写成className="submit"，否则会抛出属性不合法的警告

// 补全缺失的Hook导入
import { useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';

function AddreviewForm({ onAddReview }) {
  const navigate = useNavigate();
  const params = useParams();

  const [reviewData, setreviewData] = useState({
    image: '',
    date: '',
    destination: '',
    seat: '',
    description: ''
  })

  function handleReviewChange(event) {
    setreviewData({
      ...reviewData,
      [event.target.name]: event.target.value,
    });
  }

  function handleReviewSubmit(event) {
    event.preventDefault();
 
    const newReview = {
      ...reviewData,
      airline_id: params.airline_id
    };

    fetch(`/reviews`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(newReview),
    })
      .then((r) => r.json())
      .then((newReview) => {
        onAddReview(newReview);
        // 等提交成功、状态更新完成后再调用回退，使用v6正确的回退写法
        navigate(-1);
      });
  }

  return(
    <>
      <h1>Add a review</h1>
      <form onSubmit={handleReviewSubmit}>
        <label>Image:</label>
        <input type="text" name="image" aria-label="image" value={reviewData.image} onChange={handleReviewChange} />
        <label>Date:</label>
        <input type="text" name="date" aria-label="date" value={reviewData.date} onChange={handleReviewChange} />
        <label>Destination:</label>
        <input type="text" name="destination" aria-label="destination" value={reviewData.destination} onChange={handleReviewChange} />
        <label>Seat:</label>
        <input type="text" name="seat" aria-label="seat" value={reviewData.seat} onChange={handleReviewChange} />
        <label>Description:</label>
        <input type="text" name="description" aria-label="description" value={reviewData.description} onChange={handleReviewChange} />
        {/* 修正class为className */}
        <input className="submit" type="submit" />
      </form>
    </>
  )
}

export default AddreviewForm;

内容的提问来源于stack exchange，提问作者user19539895