title: How to use history.push in react
body: <p>Hello guys i created a new action to login user like this : </p>
  
  <pre><code>import * as types from './actionTypes';
  import sessionApi from '../api/SessionApi';
  import auth from '../auth/authenticator';
  
  
  export function loginSuccess() {
   return {type: types.LOG_IN_SUCCESS}
   }
  
  export function loginUser(credentials) {
   return function(dispatch) {
   return sessionApi.login(credentials).then(response =&gt; {
  
    sessionStorage.setItem('token', response.token);
    dispatch(loginSuccess());
  }).catch(error =&gt; {
  
    throw(error);
     });
    };
   }
  
   export function logOutUser() {
    auth.logOut();
    return {type: types.LOG_OUT}
   }
  </code></pre>
  
  <p>and i create a session reducer for my auths like this : </p>
  
  <pre><code>import * as types from '../actions/actionTypes';
  import initialState from './initialState';
  
  
  
  export default function sessionReducer(state = initialState.session, 
   action) {
    switch(action.type) {
     case types.LOG_IN_SUCCESS:
      // history.push('/restaurant')
      return !!sessionStorage.token
    default:
    return state;
     }
    }
  </code></pre>
  
  <p>after the login success i want to redirect my user to another page bu using history.push but i don't know how to do that ?? i try to first import </p>
  
  <pre><code>import createBrowserHistory from "history/createBrowserHistory"
  </code></pre>
  
  <p>and then create a new const history like that : </p>
  
  <pre><code>export const history = createBrowserHistory({
  forceRefresh: true
  })
  </code></pre>
  
  <p>and then </p>
  
  <pre><code>history.push('/restaurant')
  </code></pre>
  
  <p>but after the action, that redirect me from /#home to /restaurant/#home .... 
  and not to my right component . 
  I have 2 routes file one for my main views like this : </p>
  
  <pre><code>const routes = [
   { path: '/', name: 'Home', component: Home },
   { path: '/login', name: 'Login', component: Login },
   { path: '/home', name: 'Landing', component: Landing },
   { path: '/dishes', exact: true, name: 'Detail', component: Dish },
   { path: '/dishes/detail', name: 'DishDetail', component: Detail },
   { path: '/checkout/registration', name: 'Restaurant', component: 
   Registration },
   ];
  
   export default routes;
  </code></pre>
  
  <p>and one for all my restaurant views like this : </p>
  
  <pre><code>const routes = [
  { path: '/restaurant', exact: true, name: 'Restaurant', component: 
  RestrauntDashboard },
  { path: '/restaurant/dashboard', name: 'Restaurant Dashboard', 
  component: Dashboard },
  { path: '/restaurant/profile', name: 'Restaurant Dashboard', component: 
  Profile },
  ];
  
  export default routes;
  </code></pre>
  
  <p>and this is my app.js : </p>
  
  <pre><code>class App extends Component {
   render() {
    return (
        &lt;HashRouter&gt;
            &lt;Switch&gt;
                &lt;Route path="/restaurant" name="Restaurant" component= . 
                 {RestrauntDashboard} /&gt;
                &lt;Route path="/" name="Home" component={Home} /&gt;
            &lt;/Switch&gt;
        &lt;/HashRouter&gt;
     );
   }
  }
  
  export default App;
  </code></pre>
  
  <p>So finally i want to redirect the user in the '/restaurant/ path after he logged in , by using history.push , thank you for your help </p>