Redirect user to a Login Route on start of the application in react-redux

Question

I am new to the react-redux . Here, what I want to do is that, when user hits the url lets say , localhost:3000 then user should directly move to the src/index.js localhost:3000/login page . And If user knows some routes and hits them without login then also it should redirect it to the login page.

for that , what I have tried,

**Home.js**


import React from 'react';
import { Route, Switch } from 'react-router-dom';
import App from './App';
import LoginComponent from './Components/loginComponent/LoginComponent';


    class Home extends React.Component {
        render() {
            const rootPath = "/"; 
            return (
                <Switch>
                    <Route path={rootPath} component={App}/>
                </Switch>
            )
        }
    }

    export default Home


**App.js**

    import React from 'react';
    import './App.css';
    import { Provider } from 'react-redux';
    import Main from './Containers/Main/Main';
    import configureStore from './AppStore'


    const store = configureStore()

    class App extends React.Component {
        render() {
            return (
                <Provider store={store}>
                    <div className="container-fluid">
                        <Main />
                    </div>
                </Provider>
            )
        }
    }

    export default App



    **Main.js**


import React from 'react';
import { Route, Redirect } from 'react-router';
import LoginComponent from '../../Components/loginComponent/LoginComponent';
import { LOGIN_REDIRECT_URL  } from './../../Constants/AppConstants';


    export default class Main extends React.Component {

        constructor(props) {
            super(props);
            this.state = {
                error: false,
                hasUserLogedIn: false
            }
        }

        render() {
            const template =
                !this.props.hasUserLogedIn
                    ? (
                        <Route path="/*" render={(props) => <LoginComponent />}/> 
                    ) : (
                        <span>After login </span>
                    )

            return (
                <div>
                    {template}
                </div>
            )
        }
    }

    function mapStateToProps(state) {

    }

So, In the last file, I am doing that redirection, but it is not working. can any one help me with this ? Because of the /* it is redirecting user to same view.

Answer 1

You can use public and private routes:

const PrivateRoute = ({ component: Component, ...rest, loggedIn }) => (
  <Route
    {...rest}
    render={props =>
      (loggedIn ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: LOGIN,
            state: { from: props.location },
          }}
        />
      ))
    }
  />
);

const PublicRoute = ({ component: Component, ...rest, loggedIn}) => (
  <Route
  {...rest}
  render={props =>
    (!loggedIn ? (
      <Component {...props} />
    ) : (
      <Redirect
        to={{
          pathname: HOME,
          state: { from: props.location },
        }}
      />
    ))
  }
/> 
)