React Router not working after the page refresh

Question

fellow coders!

I have a react web app with BrowserRouter but when I do a page refresh, it suddenly stops routing anywhere regarding redirects from code.

The main index.js code looks like this:

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

The App.js routing is made from free and protected routes - just my way of implementing user authentication:

const freeRoutes = () => (
  <Switch> //My login component
    <Route path='/' component={Signin} /> 
    <Redirect to='/' />
  </Switch>
)

const protectedRoutes = () => (
  <Switch> //The other component from which I use the log out function
    <Route path='/home' component={Home} /> 
    <Redirect to='/home' />
  </Switch>
)

const App = (props) => (
    <div>
      { sessionStorage.getItem("token") ? protectedRoutes() : freeRoutes() }
    </div>
)

May app's Logout function is based on action, which simply removes sessionStorage item.

How do I reproduce the problem and how do I know that my code should be working?

When I log in and get redirected to Home component and then click logout - everything works fine, I get redirected back to the Login component and I can keep doing this multiple times.

However, when I log into my app and while being in Home component refresh the page - the redirections does no longer work. I've checked if the logout function works, and it really does work - it removes the sessionStorage item, but the redirection does not work and the path stays stuck on localhost:3000/home until I refresh the page again, what then transfers me back to the Login component.

I use:

 "react": "^16.4.0", "react-redux": "^5.0.7", "react-router-dom": "^4.3.1" 

I've also tried adding < base href="/"> into my index.html as well as historyApiFallback setting into my webpack.config.dev.js.

  devServer: { historyApiFallback: true } 

Any suggestions, corrections and ideas would be very appreciated!

PS This project was made using create-react-app

Answer 1

All sessionstorage variables are destroyed for all open tabs(fresh is part of it as well). However, localstorage variables are preserved.

So what is happening is when you login, you created a session storage. Once you refresh, it destroyed the session storage, and you still are trying to go to /home , which takes you there. You are still in /home .

You can solve the problem in two ways:

1. change to localstorage

2. take care of this in component. Like in the componetDidmount, you can check if there is a session, if not, trigger a redirect.

Answer 2

If the issue is happening with a production build on your deployed website (not in testing in your local server) the issue could be with your web.config file. Try adding the following rule to your web.config file:

       <rule name="Rewrite Text Requests" stopProcessing="true">
          <match url=".*" />
          <conditions>
            <add input="{HTTP_METHOD}" pattern="^GET$" />
            <add input="{HTTP_ACCEPT}" pattern="^text/html" />
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>

Answer 3

Seems like the issue was caused because the main App component was rendering before the routes are checked with if statement.

I then changed the logic of how I push routes - instead of using different switches, I left only one switch with all the routes. And inside the Login and Home components, I do the check (if authenticated) and use history.push() to redirect.

Thus, the problem was not with the router, but with the processes sequence after all.

Thank you all for your answers.