reactjs / react-router-redux

Ruthlessly simple bindings to keep react-router and redux in sync
https://www.npmjs.com/package/react-router-redux
MIT License
7.81k stars 644 forks source link

Navigate programatically in react-redux application using typesript #611

Closed dheeraja00 closed 7 years ago

dheeraja00 commented 7 years ago

Its been hours I am not finding a way or any good documentation which can show me how to navigate to any page programmatically. Here is my use case: I have a login form, as soon as user login successfully, they should navigate to the account page, so I am trying to do this redirection from my actions, here is my code (Note: I am using typescript):

/* 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 
}

I was trying to follow your doc, but its using browserHistory from react-router which is not available in react-router

Versions:  
"react-router-dom": "^4.2.2", 
"react-router-redux": "^5.0.0-alpha.8",
timdorr commented 7 years ago

Please don't cross-post issues.