What to use instead browserHistory for react router v4 to REDIRECT after Sign In/Sign In(firebase)

Question

I'm using firebase for sign in/sign up with React Router v4. What can I use instead browserHistory in order to redirect user after Sign In/Up to other component?

So what to use instead

browserHistory.push('/app'); . I tried with <Redirect push to="/app" />

and instead browserHistory.replace('/signin'); I tried<Redirect replace to="/signin" /> but it doesn't work.

Here is part of the code: imports and onAuthStateChanged() function

import React from 'react';
import ReactDOM from 'react-dom';
import { Switch, Redirect, Route} from 'react-router';
import { BrowserRouter, Link } from 'react-router-dom';
import { firebaseApp } from './firebase';

firebaseApp.auth().onAuthStateChanged(user => {
  if(user) {
    console.log('user has singed in or up', user);

    //**** WHAT TO USE INSTEAD OF THIS?*******
    // browserHistory.push('/app');

 }
  else {
    console.log('user has signed out or still needs to sign in');

     //**** WHAT TO USE INSTEAD OF THIS?*******
    // browserHistory.replace('/signin');
 }
})

Answer 1

Another solution is:

import createHistory from 'history/createBrowserHistory';

then create const history:

const history = createHistory();

firebaseApp.auth().onAuthStateChanged(user => {
  if(user) {
    const { email } = user;
    history.push('/');
  }
  else {
    history.replace('/signin');
  }
})

and then call history on

<Router history={history}>

Answer 2

browserHistory is no longer in react-router-v4 The best way is to use the withRouter HOC then you will have access to the history prop. Technically speaking you could access it via the context but I discourage it.

import React from 'react';
import ReactDOM from 'react-dom';
import { Switch, Redirect, Route} from 'react-router';
import { BrowserRouter, Link, withRouter } from 'react-router-dom';
import { firebaseApp } from './firebase';

firebaseApp.auth().onAuthStateChanged(user => {
  if(user) {
    console.log('user has singed in or up', user);

    //**** WHAT TO USE INSTEAD OF THIS?*******
    // browserHistory.push('/app');
    this.props.history.push('/app')

 }
  else {
    console.log('user has signed out or still needs to sign in');

     //**** WHAT TO USE INSTEAD OF THIS?*******
    // browserHistory.replace('/signin');
    this.props.history.push('/signin')
 }
})

export withRouter(yourComponent)