react-router-dom v4プログラマブルにリダイレクト

Question

私はUserLoginコンポーネントを持っており、要求を送信し、応答したらAfterLoginコンポーネントにリダイレクトします。

if (xhr.status === 200) { 
       // success 
       this.context.history.push('/dashboard') 
      } 

検索の多くが反応し、ルータ-DOMを私の後にv4のルータは、次のようになります。

import { BrowserRouter as Router, Route, Switch,Redirect} from 'react-router-dom' 
import { createBrowserHistory } from 'history'; 
const history = createBrowserHistory(); 

<Router forceRefresh={false} history={history}> 
     <div> 
      <Switch> 
       <Route exact path="/" render={() => (
        Auth.isUserAuthenticated() ? (
         <DashboardPage/> 
        ) : (
         <LoginPage/> 
        ) 
       )}/> 
       <Route path="/dashboard" render={() => (
        Auth.isUserAuthenticated() ? (
         <DashboardPage/> 
        ) : (
         <Redirect to="/login"/> 
        ) 
       )}/> 
       <Route path="/login" render={() => (
        Auth.isUserAuthenticated() ? (
         <Redirect to="/dashboard"/> 
        ) : (
         <LoginPage/> 
        ) 
       )}/> 
       <Route path="*" component={Error}/> 
      </Switch> 
     </div> 
    </Router> 

すべてがthis.context.history.push('/dashboard')一部を除いて、完全に正常に動作しています。ログイン後にユーザーをリダイレクトするにはどうすればよいですか？この方法を使用すると、コンソールでthis.contextが定義されていないことがわかります。

Cannot read property 'push' of undefined 

Answer 1

コンポーネントにアクセスさせるコンテキストのプロパティを指定する必要があります。あなたのxhrリクエストがあなたのUserLoginコンポーネント内にあるとすると、context.historyにアクセスするためには以下を追加する必要があります。

UserLogin.contextTypes = { 
    history: React.PropTypes.object, 
}; 

しかし、あなたは、コンテキストを使用してはならない、むしろ、あなたが使用する必要がありますが、あなたのコンポーネントの小道具にhistoryを置くルータwithRouter機能を反応します。

https://reacttraining.com/react-router/web/api/withRouter

import { withRouter } from 'react-router-dom'; 

class UserLogin extends React.Component { ... } 

// can call history with this.props.history in UserLogin now 
export default withRouter(UserLogin);