Question

我已经看到更多与在React应用程序中重定向用户有关的案例，每种案例只是解决方案的一种不同方法。在某些情况下，在这样的操作中发生了重定向`

export const someAction = (values, history) => async dispatch => {
    const res = await someAsyncOperation(props);
    history.push('/home');
    dispatch(someAction);
}

在此示例中，历史记录对象（表单react-router）在react组件中传递。对我来说，这种方法是不可接受的。还有来自React-Router的特殊 Redirect 。

之后，我已经搜索了很多文章，无法找到任何东西。因此，您认为重定向的最佳做法是什么？在哪里处理这种过程？

Answer 1

在React中，通常会在组件的componentDidUpdate中实现重定向。

对于异步操作，您将检查Redux存储中存储的标志，通常是布尔值，如isFetching，isCreating，isUpdating等，这些标志将被修改通过动作。

简单的例子：

class EditUser extends Component {
  compondentDidUpdate(prevProps) {
    if (prevProps.isUpdating && !this.props.isUpdating) {
      // ↑ this means that the async call is done.

      history.push('/users')
    }
  }

  updateUser() {
    const modifiedUser = // ...

    this.props.updateUser(modifiedUser)
    // ↑ will change state.users.isUpdating from false to true during the async call,
    // then from true to false once the async call is done.
  }

  render() { 
    // ...
    <button onClick={this.updateUser}>Update</button>
    // ...
  }
}

const mapStateToProps = (state, props) => ({
  userToEdit: state.users.items.find(user => user.id === props.userId)
  isUpdating: state.users.isUpdating,
})

const mapActionsToProps = {
  updateUser: usersActions.updateUser,
}

export default connect(mapStateToProps, mapActionsToProps)(EditUser)

下一步通常是在Redux存储中添加另一个标志，以跟踪异步调用是否成功（例如state.users.APIError，在其中您可以保留API返回的错误）。然后，只有在没有错误的情况下，您才能实现重定向。

Answer 2

我们主要是由于用户登录或注销而重定向用户。例如，这是基本的requireAuth HOC组件，用于检查用户是否已登录并将其重定向到另一个地方。

import React, { Component } from 'react';
import { connect } from 'react-redux';

export default ChildComponent => {
  class ComposedComponent extends Component {

    componentDidMount() {
      this.shouldNavigateAway();
    }

    componentDidUpdate() {
      this.shouldNavigateAway();
    }
    shouldNavigateAway() {
      if (!this.props.auth) {
        this.props.history.push('/');
      }
    }
    render() {
      return <ChildComponent {...this.props} />;
    }
  }
  function mapStateToProps(state) {
    return { auth: state.auth.authenticated };
  }
  return connect(mapStateToProps)(ComposedComponent);
};

有两个位置可以检查用户是否已登录

首次安装该组件时-在componentDidMount（）中
当用户尝试登录，登录或注销时-在componentDidUpdate（）

在您的代码示例中，history.push也位于动作创建器中。动作创建者属于redux方面。保持redux和单独反应。

在React应用程序中重定向用户的最佳实践是什么？

2 个答案: