useHistory hook is not working although console doesn't show errors

Question

I am trying to navigate to another page after Firebase sign up finishes, so I tried to use useHistory hook to navigate to next page after signing up is successful the signing up was successful but the hook doesn't work, the console doesn't show any errors

and if the hook doesn't work for such case, how can I navigate to next page if sign up was successful?

    import {useHistory} from 'react-router-dom'
const history = useHistory();
      function signup(event) {
        console.log({email, password});
        
        firebase.auth().createUserWithEmailAndPassword(email, password)
          .then((user) => {
            // Signed in 
            // ...
            
            this.history.push('/Quiz')
            console.log(email, password)
            
            firebase.database().ref('users/' + user.uid).set({ email: user.email, password: user.password });
           
          })
          .catch((error) => {
            var errorCode = error.code;
            var errorMessage = error.message;
            // ..
            console.log(errorMessage)
            
          });
          
      }

use `history.push('/Quiz')` instead of `this.history.push('/Quiz')` — Naren, Dec 28 '20 at 11:10
Check [this answer](https://stackoverflow.com/a/45849608/6516699), this might be helpful — Naren, Dec 28 '20 at 11:21
no in the post you are doing `console.log(errorMessage)` ,instead do `console.log(error.message)` — Sakshi, Dec 28 '20 at 11:45
Already this will log out errors for the sign up and not the navigation and the sign up is successful I checked firebase — mai mohamed, Dec 28 '20 at 12:19

Kenedy Nopriansyah · Answer 1 · 2020-12-28T12:19:02.317

0

you can to this

app.js

import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import Routes from './routes'
const history = createBrowserHistory();

ReactDOM.render(<Router history={history}><Routes/></Router>, node);

signup.js

      import {useHistory} from 'react-router-dom'
      const AppName = () => {
      const history = useHistory();

      function signup(event) {
        console.log({email, password});
        
        firebase.auth().createUserWithEmailAndPassword(email, password)
          .then((user) => {
            // Signed in 
            // ...
            
            history.push('/Quiz')
            console.log(email, password)
            
            firebase.database().ref('users/' + user.uid).set({ email: user.email, password: user.password });
           
          })
          .catch((error) => {
            var errorCode = error.code;
            var errorMessage = error.message;
            // ..
            console.log(errorMessage)
            
          });
          
      }
    return (...)
}

edited Dec 28 '20 at 12:19

answered Dec 28 '20 at 11:20

Kenedy Nopriansyah

610
4
6

I imported it already but didn't include it in the post – mai mohamed Dec 28 '20 at 11:21
And removing this didn't help – mai mohamed Dec 28 '20 at 11:22
You have packed history in package.json, if you haven't installed package history, please do the installation npm install history – Kenedy Nopriansyah Dec 28 '20 at 11:23
What's package history? I installed react-router-dom – mai mohamed Dec 28 '20 at 11:30
because using useHistory, it needs history for it to work – Kenedy Nopriansyah Dec 28 '20 at 11:34
Are you sure the package's name is "history"? – mai mohamed Dec 28 '20 at 11:35
yes, you have to configure with history and react-router-dom and it works – Kenedy Nopriansyah Dec 28 '20 at 11:36
import {createBrowserHistory} from 'history'; export const history = createBrowserHistory() – Kenedy Nopriansyah Dec 28 '20 at 11:39
Where should that import/export happen?can you please edit the answer with it? – mai mohamed Dec 28 '20 at 11:48
I tried your solution and it doesn't work either – mai mohamed Dec 28 '20 at 12:14
I am getting "history is not imported from history.js" – mai mohamed Dec 28 '20 at 12:28

useHistory hook is not working although console doesn't show errors

1 Answers1