React Router - Stay at the same page after refresh React Router - Stay at the same page after refresh reactjs reactjs

React Router - Stay at the same page after refresh


I found the reason of my problem. I use also Firebase in my project and it causes the problem. Thanks guys for help.

EDIT ======================================================================

Mabye I will write how I've fixed my problem and what was the reason of it.So i was checking if user is logged in or not in auth method. And there if user was authorized I was pushing / to browserHistory.It was mistake because every refresh method was executing and then also redirection was called as well.Solution is just to check if during executing auth method I'm on Signin page or not. If it is Signin page then I'm pushing / to browserHistory but if not then just don't push anything.

    firebaseApp.auth().onAuthStateChanged(user => {     if (user) {        let currentPathname = browserHistory.getCurrentLocation().pathname;        if( currentPathname === "/" || currentPathname === "/signin"){          browserHistory.push('/');        }        const { email } = user;        store.dispatch(logUser(email));     }     else {        browserHistory.replace('/signin');     }    })

I know that it's not pretty solution but it works and it was only home project which was created to learn react. (btw this project is using old react router 3.0 so probalby now using browserHistory is deprecated)


Check that firebase does not interfares with the client side routes :P

You can use Index routes to achieve this.

You have your navigation i.e the layout of all pages in your app component so make it the root route.

Then you want your home route to be your default route so make it your Index route.

You need to import IndexRoute from react-router package (from which you import Route).

Add this-

import { Router, Route, IndexRoute } from 'react-router';

and then make your routes like below.

Use this-

<Provider store={store}>    <Router history={browserHistory}>        <Route path="/" component={App}>             <IndexRoute component={Home} />            <Route path="/home" component={Home}/>            <Route path="/allhotels" component={AllHotels}/>            <Route path="/addhotel" component={AddHotel} />            <Route path="/about" component={About} />        </Route>        <Route path="/signin" component={SignIn} />        <Route path="/signup" component={SignUp} />    </Router></Provider>, document.getElementById('root')


it's a Server-side vs Client-side issuecheck the following thread, it might give you some insights.. React-router urls don't work when refreshing or writting manually