Question

我有相对简单的基于类的组件连接做redux-saga。它包含输入和按钮，当用户键入某些内容并按输入内容作为参数运行按钮saga方法（异步方法）时，它就包含在内。一段时间后，它将返回一些数据或错误。在该异步调用之后，我想有条件地将用户重定向到包含某些数据的其他页面或错误页面。

到目前为止，我已经设法编写了该组件的传奇和视觉部分，但我仍然在重定向部分上苦苦挣扎。

我的意思是redux调用成功（redux状态正确更改），我的问题是如何检测组件内部的redux状态更改然后重定向用户。我假设我必须使用某种生命周期方法，但是同时我不想重新呈现它（毕竟，无论是成功调用还是错误，用户都将被重定向到其他页面）。

Answer 1

重定向到基于路由器库的页面，如果使用react-router（版本4），则您的配置应包含一些文件：

history.js

import { createBrowserHistory } from "history";

export default createBrowserHistory();

在您的App.js文件（根组件）中，您使用创建的历史记录而不是默认的历史记录

import history from 'history' // history is a module comes with react-router

<Router history={history}>
    <Header />
    <Switch>
      <Route path="/" exact component={ComponentX} />
      <Route path="/Y" exact component={ComponentY} />
    </Switch>
</Router>

要在完成操作后重定向到另一页，您的操作功能将类似于此页面。在我的情况下，我使用redux-thunk，通常的想法是，重定向代码是在完成您的callAPI() asyn函数之后出现的。

export const doSomething = values => async (dispatch, getState) => {
  const response = await callAPI();
  // Redirecting code
  if (response.error) history.push("/path/to/your/error/page");
  history.push("/path/to/your/showData/page");
};

旁注：重定向（导航）到应用程序中的路径。如果在组件内部，则可以使用Link的{{1}}组件，但是，在组件代码之外（以编程方式重定向），您必须像上面那样使用react-router-dom。

异步redux调用后在React中进行条件重定向

1 个答案: