Reduxの-AUTH-ラッパーは、私は次のように反応-ルーターをセットアップを持っている認証

Question

後にリダイレクトされません。ルートの場所（/）ログイン画面が表示され、ログイン後、カタログビューにリダイレクトされます。ユーザーが別の場所にアクセスしている場合（例：/catalog/overview）、ユーザーにログインするように求められ、認証が成功すると、ユーザーは/catalog/overviewにリダイレクトされます。

事実：最初のリダイレクトはうまく動作します。私が場所にアクセスしようとすると、ログインページが表示されます。そこで、redirectActionが機能していることを述べることができます。また：私はconsole.log state.get('user')私は通常私の状態にあるユーザーオブジェクトを取得するので、authSelectorはうまく動作します。さらに：最初のIndexRouteナビゲーションからUserIsAuthenticatedを取り除くと、それがすべきであるように動作しています。

ログインするとRedux DevToolsに自分のトークンが設定されていることが示され、react-router-redux routerActions.replaceに応答すると表示されます。

マイuserReducer.js：

import { Map } from 'immutable' 

import { 
    USER_LOGGED_IN, 
    USER_LOGGED_OUT 
} from './consts' 

export default function authenticationReducer (
    state: Map<*, *> = Map({}), action: Object 
) { 
    switch (action.type) { 
    case USER_LOGGED_IN: 
     return state 
     .set('token', action.payload.get('token')) 
    case USER_LOGGED_OUT: 
     return state 
     .set('token', undefined) 
    default: 
     return state 
    } 
} 

そして、これは私が私のルートをロードする方法である：

const renderApp =() => { 
    ReactDOM.render(
    <AppContainer> 
     <MuiThemeProvider muiTheme={muiTheme}> 
     <Provider store={store}> 
      <Router history={history} routes={routes} /> 
     </Provider> 
     </MuiThemeProvider> 
    </AppContainer>, 
    document.getElementById('root') 
) 
} 

にはどうすればログイン時にこれらのルートを再トリガすることができますか？

Answer 1

私はLoginコンポーネントrender（あなたのコードを持つ唯一の違いがある、私は、ユーザーがuser小道具、ないuser.tokenを確認して承認されていることを確認してください）にリダイレクトを追加することによって、それを固定している、同じ問題を抱えていた：

export class Login extends React.PureComponent { 
    static propTypes = { 
    dispatchLogin: React.PropTypes.func, 
    dispatchLogout: React.PropTypes.func, 
    user: React.PropTypes.object, 
    location: React.PropTypes.object, 
    router: React.PropTypes.object, 
    } 

    render() { 
    const { dispatchLogout, dispatchLogin, user, location, router } = this.props; 

    // make redirect if user is logged in and redirect is required 
    if (user) { 
     if (location && location.query && location.query.redirect && router) { 
     router.push(location.query.redirect); 
     } 
    } 

    const handleLogin = (values) => new Promise((resolve, reject) => { 
     dispatchLogin(values, { resolve, reject }); 
    }); 

    return (
     <div className={`${styles.loginPage} container`}> 
     <Helmet title="Login" /> 
     <h2>Login</h2> 
     {!user && <LoginForm onSubmit={handleLogin} />} 
     {user && 
      <div> 
      <p>You are currently logged in as {user.name}.</p> 
      <button className="btn btn-danger" onClick={dispatchLogout}> 
       <i className="fa fa-sign-out" />{' '}Log Out 
      </button> 
      </div> 
     } 
     </div> 
    ); 
    } 
}