react router history.push没有加载预期的组件。

Question

我正在使用saga来管理我的异步调用。

下面是登录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))
    }
}

登录成功后，我想把用户重定向到仪表盘，所以，执行forwardTo函数。

yield call(forwardTo, '/dashboard') 执行forwardTo函数，下面是它的实现。

import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
function forwardTo(location) {
    console.log('location', location);
    history.push(location);
}

export default forwardTo;

它把我的网址从 http://localhost:3000/login 到 http://localhost:3000/dashboard 但它显示的是登录页面而不是仪表盘。

路由。

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

可以在登录组件中实现......

传奇做完这个 yield put(loginsuccess(response.data.data.token))现在我假设... 一些关于登录成功的数据被储存起来。比如说 state.user.token 是 null 登录前，登录后，它有一定的价值。

把你的登录组件改成这样。

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);

---

当用户未登录时 token 价值是 null 所以它什么都不显示，但当登录成功时，一些值分配给token，作为结果。<Redirect to='/dashboard'/> 将被渲染，网站将被重定向到。/dashboard

Answer 2

你每次调用createHistory()都会创建新的历史记录，试着把这个函数添加到应用中，使它在应用运行后就会被启动，并加入 exact 你所有路线的属性

        <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>