时间戳

首页 > 解决方案 > 浏览器显示重定向的 url 但组件未呈现 - Redux Saga

reactjs - 浏览器显示重定向的 url 但组件未呈现 - Redux Saga

问题描述

我正在尝试学习 redux saga。

我有一个编辑页面，提交表单后，它应该被重定向到仪表板页面。

代码如下。

import { Switch, Redirect } from "react-router-dom";  
import { Router } from 'react-router';
import { Route } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';

const history = createHistory();
render()
    {
        return(
            <Router history={history}> 
                 <PrivateRoute exact path="/dashboard"  component={Dashboard}/>
               ...
            </Router>
        )
    }

更新用户的传奇如下。

import createHistory from 'history/createBrowserHistory';
const history = createHistory();



function* updateUserDetails(action)
{
    try {
        const response = yield call(userServices.updateUserDetails, action.payload)

        if(response.data && response.data.status === 'success') 
        {
            yield call(redirectToPage, '/dashboard');
        }
        else
        {
            yield put ({ type: actionTypes.UPDATE_USER_FAILURE});
        }
    }
}


function redirectToPage(location) {
    history.push('/dashboard');
}

问题是浏览器显示重定向的 url 但未呈现组件。

关于如何解决这个问题的任何想法。

标签： reactjsredux-saga

解决方案

我认为你应该只有一个history实例。尝试history从您的第一个文件中导出对象并在第二个文件中导入以使用它。

import { Switch, Redirect } from "react-router-dom";  
import { Router } from 'react-router';
import { Route } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';

export const history = createHistory();
render()
    {
        return(
            <Router history={history}> 
                 <PrivateRoute exact path="/dashboard"  component={Dashboard}/>
               ...
            </Router>
        )
    }

import createHistory from 'history/createBrowserHistory';
import {history} from './App.js' //I assumed your first file is App.js



function* updateUserDetails(action)
{
    try {
        const response = yield call(userServices.updateUserDetails, action.payload)

        if(response.data && response.data.status === 'success') 
        {
            yield call(redirectToPage, '/dashboard');
        }
        else
        {
            yield put ({ type: actionTypes.UPDATE_USER_FAILURE});
        }
    }
}


function redirectToPage(location) {
    history.push('/dashboard');
}

推荐阅读