Браузер показывает перенаправленный URL, но компонент не отображается - Redux Saga - PullRequest
Новая
       10

Браузер показывает перенаправленный URL, но компонент не отображается - Redux Saga

0 голосов
/ 29 апреля 2019

Я пытаюсь выучить саксофон.

У меня есть страница редактирования, и когда форма отправлена, она должна быть перенаправлена ​​на страницу панели инструментов.

Код выглядит следующим образом. 

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но компонент не отображается.

Есть идеи, как это исправить.

1 Ответ

0 голосов
/ 29 апреля 2019

Я думаю, у вас должен быть только один 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');
}
...