タイプレステキストを使用してreact-reduxアプリケーション内をプログラム的にナビゲートする

Question

時間どのようにページをプログラム的にナビゲートするかを示す方法や良いドキュメントは見つかりません。ここに私の使用例があります： 私はログインフォームを持っています。ユーザーのログインが成功するとすぐにアカウントページに移動する必要がありますので、私のアクションからこのリダイレクトをしようとしています。ここに私のコードです。 https://github.com/reactjs/react-router-reduxが、そのはreact-routerでは使用できませんbrowserHistory from 'react-router'を使用して：

/* Router.tsx */ 
const RouterComponent =() => { 
    return (
     <Router> 
      <Switch> 
       <Route exact path="/" component={LoginForm} /> 
       {/* <Route exact path="/" component={EmployeeList} /> */} 
       <Route path="/account" component={Account} /> 
      </Switch> 
     </Router> 
    ) 
} 

/* App.tsx */ 
render() { 
     const store = createStore(reducers, {}, applyMiddleware(ReduxThunk)); 

     return (
      <Provider 
       store={store}> 
       <Router /> 
      </Provider> 
     ) 
    } 

/* Reducer */ 
import { routerReducer } from 'react-router-redux'; 
export default combineReducers({ 
    auth: AuthReducer, 
    account: AccountReducer, 
    routing: routerReducer 
}) 

/* Login action */ 
const loginUserSuccess = (dispatch: any, user: any) => { 
    dispatch({ 
     type: LOGIN_USER_SUCCESS, 
     payload: user 
    }); 

    // Here I want to add programmatic navigation 
} 

私は、このドキュメントに従うことをしようとしていた。typescriptです）を使用。

Versions: 
"react-router-dom": "^4.2.2", 
"react-router-redux": "^5.0.0-alpha.8", 

Answer 1

一つの方法あなたのApp.tsxは、それが<Provider>タグ内にネストされていないため、再来に接続されていない空の<Router />成分を有するreact-router-redux

import { push } from 'react-router-redux'; 
... 
dispatch(push(`/account/${user.id}`)); 

を使用することです。

/* App.tsx */ 
render() { 
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk)); 

    return (
     <Provider 
      store={store}> 
      <Router> 
       <Switch> 
        <Route exact path="/" component={LoginForm} /> 
        {/* <Route exact path="/" component={EmployeeList} /> */} 
        <Route path="/account" component={Account} /> 
       </Switch> 
      </Router>     
     </Provider> 
    ) 
}