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

Question

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

export const someAction = (values, history) => async dispatch => {

    const res = await someAsyncOperation(props);

    history.push('/home');

    dispatch(someAction);

}

在此示例中，历史对象（form react-router）在react组件中传递。对我来说，这种方法是不可接受的。从react-router还有一个特殊的重定向。

从那以后，我已经搜索了很多文章，找不到任何东西。因此，您认为重定向的最佳实践是什么？在哪里处理此类过程？

Answer 1

我们主要是由于用户登录或注销而重定向用户。例如，这是基本的requireAuth HOC组件，用于检查用户是否已登录并将其重定向到另一个地方。import React, { Component } from 'react';import { connect } from 'react-redux';export default ChildComponent => {&nbsp; class ComposedComponent extends Component {&nbsp; &nbsp; componentDidMount() {&nbsp; &nbsp; &nbsp; this.shouldNavigateAway();&nbsp; &nbsp; }&nbsp; &nbsp; componentDidUpdate() {&nbsp; &nbsp; &nbsp; this.shouldNavigateAway();&nbsp; &nbsp; }&nbsp; &nbsp; shouldNavigateAway() {&nbsp; &nbsp; &nbsp; if (!this.props.auth) {&nbsp; &nbsp; &nbsp; &nbsp; this.props.history.push('/');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; return <ChildComponent {...this.props} />;&nbsp; &nbsp; }&nbsp; }&nbsp; function mapStateToProps(state) {&nbsp; &nbsp; return { auth: state.auth.authenticated };&nbsp; }&nbsp; return connect(mapStateToProps)(ComposedComponent);};有两个位置可以检查用户是否已登录首次安装该组件时-在componentDidMount（）中当用户尝试登录，登录或注销时，登录componentDidUpdate（）同样在您的代码示例中，history.push在动作创建器中。动作创建者属于redux方面。保持redux和反应分开。