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.