Is .replace() something different in react v6?

Question

I'm doing a meetup app and I want to go back to the main page after the data is submitted, Here is my code:

import { useNavigate } from "react-router-dom";

import NewMeetupForm from "../components/meetups/NewMeetupForm";

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

  function addMeetupHandler(meetupData) {
    fetch(
      "https://react-meetup-app-aad0d-default-rtdb.firebaseio.com/meetups.json",
      {
        method: "POST",
        body: JSON.stringify(meetupData),
        headers: {
          "Content-Type": "application.json",
        },
      }
    ).then(() => {
      navigate.replace("/");
    });
  }

  return (
    <section>
      <h1>Add New Meetup</h1>
      <NewMeetupForm onAddMeetup={addMeetupHandler} />
    </section>
  );
}

As you can see I used a

.then(() => {
navigate.replace("/");
});

but when I submit the info, I get this error: Unhandled Rejection (TypeError): navigate.replace is not a function

I know on v6 alotta things have changed, is that the case here or, am I missing something?

Michael · Accepted Answer · 2021-12-09 19:44:23Z

3

in the API documentation the url replacing using navigate is used as follows:

  import { useNavigate } from "react-router-dom";

  function SignupForm() {
      let navigate = useNavigate();

  async function handleSubmit(event) {
    event.preventDefault();
    await submitForm(event.target);
    navigate("../success", { replace: true });
  }

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
}

see this line:

navigate("../success", { replace: true });

Further it is stated:

The navigate function has two signatures: Either pass a To value (same type as ) with an optional second { replace, state } arg or Pass the delta you want to go in the history stack. For example, navigate(-1) is equivalent to hitting the back button.

PS: btw I think you are confusing the .replace() with the one from the location method https://developer.mozilla.org/en-US/docs/Web/API/Location/replace

answered Dec 9, 2021 at 19:44

Michael

1,0178 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chad Roussel Over a year ago

Got it! Thanks alot Michael! much appreciated!

Michael Over a year ago

awesome! you may upvote the answer ;)

Sam7ahmed · Accepted Answer · 2021-12-21 12:11:53Z

1

import { useNavigate } from 'react-router-dom';

import NewMeetupForm from '../components/meetups/NewMeetupForm';

const NewMeetupPage = () => {

const navigate = useNavigate();

const addMeetupHandler = (meetupData) => {
    fetch('"https://react-meetup-app-aad0d-default-rtdb.firebaseio.com/meetups.json",
    {
        method: 'POST',
        body: JSON.stringify(meetupData),
        headers: {
            'content-type':'application/json'
        }
    }
    ).then(() => {
        navigate('/', {replace: true})
    });
}
return (
    <section>
       <h1> New Meetup Page</h1>
       <NewMeetupForm   onAddMeetup={addMeetupHandler}/>
    </section>
)

} export default NewMeetupPage

answered Dec 21, 2021 at 12:11

Sam7ahmed

111 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Is .replace() something different in react v6?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related