ReactJS+Redux: 만약 영패가 로컬 저장소에 있다면 어떻게 페이지로 직접 내비게이션(로그인 건너뛰기)합니까?

4

질문:

현재 내 루트 구성 요소에서 로그인 페이지로 바로 이동하는 것이 기본값입니다.그러나 로컬 저장소에 영패가 존재하는지 확인하기 위해 설정하고 싶습니다. 영패가 존재하면 로그인 페이지를 건너뛰고 홈 페이지로 바로 이동합니다.
내가 설정한 다음 코드를 사용하면 홈페이지로 내비게이션을 할 수 있지만, 홈페이지로 내비게이션을 하기 전에 로그인 페이지가 한순간에 나타난다.
나는 어떻게 홈페이지에 직접 들어가서 홈페이지를 표시하지 않습니까?
코드는 다음과 같습니다.
import React from 'react';
import {render} from 'react-dom';
import configureStore from '../redux/store'
import { Provider } from 'react-redux'
import { Router, Route, IndexRoute, hashHistory } from 'react-router'
import cookie from 'react-cookie';

import actions from '../redux/actions'
import Login from '../components/Login'
import App from '../components/App'
import Home from '../components/Home'

let store = configureStore(initialState)

//Takes the token from local storage and set to const token
const token = cookie.load('token');

//This checks to see if the token exists in the local storage, and if it does, it enters the if statement and goes directly to the Home component.
if(token) {
  window.location.href = 'http://localhost:3000/#/App'
}

render(
  <div>
    <Provider store={store}>
      <Router history={hashHistory}>
        <Route
          component={Login}
          path='/'
        />
        <Route
          component={App}
          path='App'
        >
          <IndexRoute
            component={Home}
          />
        </Route>
      </Router>
    </Provider>
  </div>,
  document.getElementById('app')
)

답안

LoginCheck이라는 루트 구성 요소를 만들 것입니다. 이 구성 요소에서componentWillMount 생명주기 연결을 사용하여 사용자가 로그인했는지 확인할 것입니다.사용자가 로그인하면 올바른 페이지로 계속 이동합니다. 그렇지 않으면 로그인 페이지로 다시 이동합니다.
도움이 되었으면 좋겠습니다.