ShakaCode | ShakaCode Blog | Rails On Maui Blog | Rails | ReactJs | JavaScript | Webpack | Productivity |

Authenticated routes in reactJS using react-router-dom


#1

I am working on reactJS app and using react-router-dom for routing. If user is not authenticate, it’s go to localhost:3000/login and after successful login it’s redirects to localhost:3000/dashboard. After reloading this page it’s shows me blank page.

To resolve this problem I have added “/app” after my base url, and now it comes before every routing url now inner pages routing is like localhost:3000/app/dashboard. But I don’t want to add “app” before every routing element, I need routing url should be, base_url/page routing path.

App.js

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';

const InitialPath = ({ component: Component, authUser, ...rest }) => {
   return (<Route
         {...rest}
         render={props =>
            authUser
               ? <Component {...props} />
               :
               <Redirect
                  to={{
                     pathname: '/login',
                     state: { from: props.location }
                  }}
               />
         }
      />
   )
}

class App extends Component {
   constructor(props) {
      super(props);
   }

   render() {
      let isUserLogggedIn = localStorage.getItem('isUserLoggedIn');
      const { location, match } = this.props;
      let url = location.pathname.split('/');
      if (location.pathname === '/login') {
         localStorage.clear();
      }
      if (location.pathname === '/') {
         if (!isUserLogggedIn) {
            return (<Redirect exact from='/' to={`${match.url}login`} />);
         } else {
            return (<Redirect exact from='/' to={`${match.url}app`} />);
         }
      }
      if ((url[1] !== "app") && (url[1] !== "login")) {
         return (<Redirect exact from={location.pathname} to={`${match.url}login`} />);
      }
      return (
         <>
            <BrowserRouter>
               <Switch>
                  <InitialPath
                     path={`${match.url}app`}
                     authUser={isUserLogggedIn}
                     component={DefaultLayout}
                     location={location}
                  />
                  <Route path='/login' component={Login} />
               </Switch>
            </BrowserRouter>
         </>
      );
   }
}

export default App;

If the “app” is removed from root, then its work continues and error appears.
Error::

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

#2

Hi @Harleen_Kaur, this looks like you’ll need some standard debugging. Are you using React on Rails? How is your /config/routes.rb configured?