Перенаправить пользователя на страницу входа в систему при запуске приложения вact-redux

Question

Я новичок в react-redux. Здесь я хочу сделать следующее: когда пользователь нажимает на URL, скажем, localhost:3000, тогда пользователь должен сразу перейти на страницу src / index.js localhost: 3000 / login. И если пользователь знает некоторые маршруты и нажимает их без входа в систему, то он также должен перенаправить его на страница входа.

за то, что я пробовал,

**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) {

    }

Итак, в последнем файле я делаю это перенаправление, но оно не работает. Кто-нибудь может мне с этим помочь ? Из-за /* он перенаправляет пользователя к тому же представлению.

Answer 1

Вы можете использовать публичные и частные маршруты:

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 },
        }}
      />
    ))
  }
/> 
)