CODEWITHSUNDEEP
javascriptreactjsreduxreact-router
zilijonas
zilijonas

Reputation: 3785

React Router not working after the page refresh

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!

P.S. This project was made using create-react-app

Upvotes: 1

Views: 4922

Answers (3)

zilijonas
zilijonas

Reputation: 3785

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.

Upvotes: 0

Ryan
Ryan

Reputation: 544

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>

Upvotes: 2

leogoesger
leogoesger

Reputation: 3840

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.

Upvotes: 0

Related Questions