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. — , Apr 07 '21 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, Apr 07 '21 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, Apr 07 '21 at 11:32
@Eldshe I tried that as well, it actually says its on version `6.14.11`, which I think is the newest one! Not sure why this isn't working — Gianluca, Apr 07 '21 at 11:53
Does this help? https://stackoverflow.com/a/66971821/5734311 (I googled the error message) — , Apr 07 '21 at 12:02
@ChrisG I tried that too, but it gave same export error. I posted an answer to my question below if you would like to see — Gianluca, Apr 07 '21 at 12:04
You can use component from react to redirect to the landing page. — Ahmed Waqas, Apr 07 '21 at 12:06

score 0 · Answer 1 · answered Apr 07 '21 at 12:03

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

opening a new page in react

1 Answers1