如何在异步 api 请求后重新路由我的反应应用程序

Question

我正在重新路由我的应用程序。我有一个表单，我希望在表单提交成功后重定向用户。我在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;

我正在使用react-router-dom进行重新路由，并使用浏览器重新路由的历史记录。

Answer 1

您可以使用以下代码代替您在 storeRecord 组件中使用的 dispatch(push('/')) 。window.location.assign('/');

Answer 2

您需要使用路由器模块用于动态路由的相同历史对象。最简单的解决方案是不使用 browserRouter，而是使用具有自定义历史记录的 Routerimport React from 'react';import { Router, Route, Switch } from 'react-router-dom';import { createBrowserHistory } from 'history';...export const browserHistory = createBrowserHistory();const AppRouter=()=>{&nbsp; &nbsp; return(<Router history={browserHistory}>&nbsp; &nbsp; &nbsp; &nbsp; <LoaderModal />&nbsp; &nbsp; &nbsp; &nbsp; <Switch>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route path="/" exact component={LandingPage} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <PublicRouter path="/register" exact component={SignupPage} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <PublicRouter path="/login" exact component={LoginPage} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <PrivateRoute path="/investment/new" exact component={InvestmentForm} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route component={NotFoundPage} />&nbsp; &nbsp; &nbsp; &nbsp; </Switch>&nbsp; &nbsp; </Router>)}export default AppRouter;然后你的动作看起来像import { browserHistory } from '../router/router';...export const storeRecord=(data)=>{&nbsp; &nbsp; return function(dispatch, getState){&nbsp; &nbsp; &nbsp; const {authToken, userId} = getState().authReducer;&nbsp; &nbsp; &nbsp; token= authToken;&nbsp; &nbsp; &nbsp; &nbsp; data.userId = userId;&nbsp; &nbsp; &nbsp; &nbsp; const url = 'investment/store';&nbsp; &nbsp; &nbsp; &nbsp; apiCall(url, data, dispatch,'post').then((data)=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; try{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(data.status=== 200){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; browserHistory.push('/');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; catch(error){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('returnedError',error);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }, (error)=>{console.log(error)});&nbsp; &nbsp; }}