亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在異步 api 請求后重新路由我的反應應用程序

如何在異步 api 請求后重新路由我的反應應用程序

開心每一天1111 2022-07-08 17:15:31
我正在重新路由我的應用程序。我有一個表單,我希望在表單提交成功后重定向用戶。我在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進行重新路由,并使用瀏覽器重新路由的歷史記錄。
查看完整描述

2 回答

?
天涯盡頭無女友

TA貢獻1831條經驗 獲得超9個贊

您可以使用以下代碼代替您在 storeRecord 組件中使用的 dispatch(push('/')) 。

window.location.assign('/');


查看完整回答
反對 回復 2022-07-08
?
楊魅力

TA貢獻1811條經驗 獲得超6個贊

您需要使用路由器模塊用于動態路由的相同歷史對象。


最簡單的解決方案是不使用 browserRouter,而是使用具有自定義歷史記錄的 Router


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)});



    }

}


查看完整回答
反對 回復 2022-07-08
  • 2 回答
  • 0 關注
  • 112 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號