react router history.push not loading expected component - reactjs

Question

I am using saga for managing my async call.
Here is login saga :
export function* loginApi({ type, formObj }) {
const formData = new FormData();
Object.keys(formObj).map(key => {
formData.append(key, formObj[key]);
})
const response = yield axios.post(`http://localhost/coupon/web/api/login`, formData)
if (response.data.status) {
localStorage.setItem('token', response.data.data.token);
yield put(loginsuccess(response.data.data.token))
yield call(forwardTo, '/dashboard')
} else {
yield put(loginFaield(response.data.msg))
}
}
After login successful I want redirect user to dashboard so for that:
yield call(forwardTo, '/dashboard') which execute forwardTo function and below is implementation of it:
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
function forwardTo(location) {
console.log('location', location);
history.push(location);
}
export default forwardTo;
It change my url from http://localhost:3000/login to http://localhost:3000/dashboard but it shows login page instead of dashboard.
Routes :
const Routes = () => {
return (
<Switch>
<Route path="/register" component={RegisterUser} />
<Route path="/dashboard" component={Dashboard} />
<Route path="/login" component={Login} />
<Route path="/" component={Home} />
</Switch>
)
}

Answer 1

You can achieve this in the Login Component...
After the saga does this yield put(loginsuccess(response.data.data.token))
Now I assume.. some data regarding login successful is stored. Say state.user.token is null before login, after login it has some value.
Do change your Login Component to look like this.
import React from 'react';
import {Redirect} from "react-router-dom";
import {withRouter} from "react-router-dom";
import {compose} from 'redux';
import {connect} from 'react-redux';
const Login = props => {
return (
<div>
/*all login UI */
//..
{
props.token ?
<Redirect to={'/dashboard'}/> : null
}
</div>
)
};
const mapStateToProps = state => ({
token: //state.user.token or whatever
});
export default compose(
withRouter,
connect(mapStateToProps, mapDispatchToProps)
)(Login);
When user is not logged in the token value is null so it renders nothing but when login is successful, some value assigned to token, as the result <Redirect to='/dashboard'/> will be rendered and the site will be redirected to /dashboard

Answer 2

You're creating new history each time you invoke createHistory(), try to add this function to the app so that it's fired once the app is running and add exact property for all your routes
<Switch>
<Route exact path="/register" component={RegisterUser} />
<Route exact path="/dashboard" component={Dashboard} />
<Route exact path="/login" component={Login} />
<Route exact path="/" component={Home} />
</Switch>

Answer 3

I have solved this problem a few days ago.
I think you have created Router with BrowserRouter.
If so, you should change it to default Router and add history.
Do it like below code.
history.tsx
import { createBrowserHistory } from 'history';
export default createBrowserHistory();
store.tsx
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
export default history;
// You can add middleware here...
App.tsx
import { FC } from "react";
import { Router, Switch, Route } from "react-router-dom";
import history from '../utils/history';
interface FuncProp {}
const AppRouter: FC<FuncProp> = () => {
return (
<Router history={history}>
<Switch>
<Route path="/home">
<p>HomePage</p>
</Route>
<Route path="*">
<p>Page not found. (404)</p>
</Route>
</Switch>
</Router>
);
};
export default AppRouter;