Redirect to previous path on login - React Router v4

Question

I am using react router v4 and trying to implement a functionality where no matter what route the user clicks on, he gets taken to the login page i.e. if he is not logged in already.

but after login he is redirected to the same page he was trying to access before login

I have managed to do that for 2 of the routes using the below code, but not sure if this is the best way to do this

<Route path="/dashboard" render={(props) => (     auth ?      (<MainDash props={this.props} />)      :      (<Redirect to="/login"/>)     )} /> <Route exact path="/customers" render={(props) => (     auth ?      (<MainApp />)      :      (<Redirect to="/login"/>)     )} /> <Route exact path="/staff" render={(props) => (     auth ?      (<MainApp />)     :      (<Redirect to="/login"/>)     )} /> <Route path="/login" component={Login} /> <Route path="/logout" component={Login} /> 

Now, although this is working correctly, I dont want to repeat the same code again and again for all the different routes. so is there a better way to do this?

Now, after logging out, it wasnt showing anything and I wanted it to show the login page. therefore I added the below lines too, so it would show the login page as soon as the user logs out.

<Route path="/login" component={Login} />       <Route path="/logout" component={Login} /> 

But there's one more problem -> although after logout it does display the login component,(still showing route as '/logout') but it brings me back to login form (this time route is '/login' ) and from this route the login takes me to the dashboard. Now, why is that happening?

Would appreciate some help on this as I am still learning about react router

Answer 1

Following this example you can make a component PrivateRoute to wrap Route and use that whenever you need a route that requires auth.

This is the component code from the example.

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

Answer 2

Previous answers are not detail enough.

Solution:

Router

<BrowserRouter basename={BASE_NAME}>   <Switch>     {publicRouteList()}     <Route exact key="login" path="/login" component={Login} />     {getLoggedRouteList(state.logged)}     <Redirect key="redirect-login" to="/login" />   </Switch> </BrowserRouter> 

getLoggedRouteList

const getLoggedRouteList = (logged) => {   if (!logged) {     return (       <Route         key="wait-login"         render={props => {           return (             <Redirect               to={{                 pathname: '/login',                 state: { from: props.location },               }}             />           );         }}       />     );   }    const output = [];   output.push(     /* Here place route list that need logged */   );   return output; } 

Login Component

class Login extends React.Component {   login = async param => {     const { location } = this.props;     const { state } = location;      /* Here place request login api */      // go to state.from if set before     if (state && state.from) {       history.replace(state.from);     }     // else go to home     else {       history.replace('/');     }   } }