Why cant i navigate back to the previous page using navigate.goBack()?

Admin 1
Viewed 45

Hey guys I'm new to react-router@6 and I'm kind of confused.

When I use the useEffect hook to post a new review, I want the user to head back to the previous page where it has all the reviews after submitting the review.

I get this error: Uncaught TypeError: navigate.goBack is not a function.

Below is my code:

import { useNavigate } 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(onAddReview);
    navigate.goBack()
  }

  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}></input>
        <label>Date:</label>
        <input type="text" name="date" aria-label="date" value={reviewData.date} onChange={handleReviewChange}></input>
        <label>Destination:</label>
        <input type="text" name="destination" aria-label="destination" value={reviewData.destination} onChange={handleReviewChange}></input>
        <label>Seat:</label>
        <input type="text" name="seat" aria-label="seat" value={reviewData.seat} onChange={handleReviewChange}></input>
        <label>Description:</label>
        <input type="text" name="description" aria-label="description" value={reviewData.description} onChange={handleReviewChange}></input>
    
        <input class="submit" type="submit" />
      </form>
    </>
  )
}

export default AddreviewForm;
react-router react-hooks reactjs
3 Answers

Issue

The navigate function is the function. It's not an object like the history object used in react-router-dom@5.

Solution

The navigate function takes target To and options arguments, or a single delta number to navigate forward/backward.

useNavigate

interface NavigateFunction {
  (
    to: To,
    options?: { replace?: boolean; state?: any }
  ): void;
  (delta: number): void;
}

If you want to issue a back navigation action then use the delta variant.

Example:

navigate(-1);
user_86908570

Try this instead:

const navigate=useNavigate();

...

navigate(-1) // go back
navigate(1) // go forward

This should be valid for react-router-v6

user_180473690

navigate.goBack()

is no such function in react router dom, you should be using this instead.

const navigate = useNavigate();
navigate(-1);
user_195444720
Related