opening a new page in react

Question

I am trying to do this function where once the user successfully lands on the page, it will update their details in firebase, and then right away go to the landing page. but I cannot get to the landing page. here's what I have, and all the different methods ive tried:

 const successPage = () => { firebase.auth().onAuthStateChanged((user) => { if(user) { // console.log("profile.js " + user.uid) // userID = user.uid console.log("calling success page : " + user.uid) firestore.collection("profiledata").doc(user.uid).update({ accountStatus: "active" }).then (() => { // window.open(routes.LANDING) <Route path="/"></Route> // window.location.href(routes.LANDING) // history.push(routes.LANDING) }) } }) return ( <input type="hidden"></input> ); }

it all works, no errors other then the error that it doesn't like history.push, or this.props.history.push, or window.location.href... the only thing it likes is window.open, but I cant use this because it opens a new window! Plz help :)

Open the react router docs and look for how to redirect. Use any of the two methods. — user5734311
– user5734311, Commented Apr 7, 2021 at 11:28
Did you use "history" as should? you first import the useHistory hook module and name it "history" and then use it like you did — Eldshe
– Eldshe, Commented Apr 7, 2021 at 11:28
I imported this: import { useHistory } from "react-router-dom"; and set useHistory = to this: let history = useHistory(); but got the error Attempted import error: 'useHistory' is not exported from 'react-router-dom'. — Gianluca
– Gianluca, Commented Apr 7, 2021 at 11:32

Gianluca · Accepted Answer · 2021-04-07 12:03:29Z

I found out my own error. I did this:

 const successPage = props => { firebase.auth().onAuthStateChanged((user) => { if(user) { // console.log("profile.js " + user.uid) // userID = user.uid console.log("calling success page : " + user.uid) firestore.collection("profiledata").doc(user.uid).update({ accountStatus: "active" }).then (() => { // window.open(routes.LANDING) // <Route path="/"></Route> // window.location.href(routes.LANDING) // history.push(routes.LANDING) props.history.push('/') }) } }) return ( <input type="hidden"></input> ); }

in the very first line, I brought in props, and it worked

Collectives™ on Stack Overflow

opening a new page in react

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related