反应路由器 history.push 没有加载预期的组件

Question

我正在使用 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))
    }
}

登录成功后，我想将用户重定向到仪表板，为此：

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;

它将我的 url 从 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

您每次调用 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>

Answer 2

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

传奇故事完成后 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，因此它不呈现任何内容，但当登录成功时，一些值分配给令牌，结果 <Redirect to='/dashboard'/> 将是呈现并且网站将被重定向到 /dashboard

反应路由器 history.push 没有加载预期的组件

react router history.push not loading expected component

redirect

router

saga

reactjs