Как перенаправить мое приложение реакции после асинхронного запроса API

Question

Я работаю над изменением маршрута моего приложения. У меня есть форма, я хочу, чтобы пользователь был перенаправлен после успешной отправки формы. Я поместил логи c после того, как API успешно. Мой URL-адрес изменяется, но компонент, который должен быть загружен по этому URL-адресу, не загружается.

import { browserHistory } from '../router/router';
...

export const storeRecord=(data)=>{
    return function(dispatch, getState){
      //console.log('state',getState());
      const {authToken, userId} = getState().authReducer;
      token= authToken;
        data.userId = userId;
        const url = 'investment/store';
        apiCall(url, data, dispatch,'post').then((data)=>{
          try{
            if(data.status=== 200){
              //let data = apiResponse.data
              console.log('success',data);
              browserHistory.push('/');
              //dispatch(push('/'));
            }
          }
          catch(error){
            console.log('returnedError',error);

          }
        }, (error)=>{console.log(error)});
        
        
    }
}

Вот и мой маршрут:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { createBrowserHistory } from 'history';
...
export const browserHistory = createBrowserHistory();


const AppRouter=()=>{

    return(<Router>
        <LoaderModal />
        <Switch>
            <Route path="/" exact component={LandingPage} />
            <PublicRouter path="/register" exact component={SignupPage} />
            <PublicRouter path="/login" exact component={LoginPage} />
            <PrivateRoute path="/investment/new" exact component={InvestmentForm} />
            <Route component={NotFoundPage} />
            
        </Switch>
    </Router>)
}

export default AppRouter;

Я использую response-router-dom для перенаправления и history для перенаправления браузера.

Answer 1

Вы можете использовать следующий код вместо отправки (pu sh ('/')), который вы использовали в компоненте storeRecord.

window.location.assign ('/');

Answer 2

Вам необходимо использовать тот же объект истории, который используются модулями маршрутизатора для динамической маршрутизации.

Самое простое решение для вас - не использовать browserRouter, а использовать маршрутизатор с пользовательской историей

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { createBrowserHistory } from 'history';
...
export const browserHistory = createBrowserHistory();


const AppRouter=()=>{

    return(<Router history={browserHistory}>
        <LoaderModal />
        <Switch>
            <Route path="/" exact component={LandingPage} />
            <PublicRouter path="/register" exact component={SignupPage} />
            <PublicRouter path="/login" exact component={LoginPage} />
            <PrivateRoute path="/investment/new" exact component={InvestmentForm} />
            <Route component={NotFoundPage} />

        </Switch>
    </Router>)
}

export default AppRouter;

и тогда ваше действие будет выглядеть как

import { browserHistory } from '../router/router';
...

export const storeRecord=(data)=>{
    return function(dispatch, getState){
      const {authToken, userId} = getState().authReducer;
      token= authToken;
        data.userId = userId;
        const url = 'investment/store';
        apiCall(url, data, dispatch,'post').then((data)=>{
          try{
            if(data.status=== 200){
              browserHistory.push('/');
            }
          }
          catch(error){
            console.log('returnedError',error);

          }
        }, (error)=>{console.log(error)});


    }
}