在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 => {

  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和反应分开。