如果 useEffect 中提到的依赖项发生变化，如何重新渲染组件。我想在类组件中实现这个

Question

当历史记录、用户信息、重定向发生变化时我想重定向到主屏幕。我发现我们可以使用 componentDidUpdate 但我不知道如何使用它。

class LoginScreen extends Component {
      constructor(props) {
        super(props);
    
        this.state = {
          email: '',
          password: '',
          location: this.props.location,
        };
    
        this.submitHandler = this.submitHandler.bind(this);
      }
    
      componentDidMount() {
        const { userInfo } = this.props.userLogin;
        const { location } = this.state;
        const redirect = location.search ? location.search.split('=')[1] : '/';
    
        if (userInfo) {
          history.push(redirect);
        }
      }
    
      componentDidUpdate(prevProps) {
        console.log(prevProps, 'asd');
      }
    
      submitHandler(e) {
        const { email, password } = this.state;
        e.preventDefault();
        this.props.login(email, password);
      }
    
      render() {
        const { email, password, location } = this.state;
        const { loading, error } = this.props.userLogin;
    
        const redirect = location.search ? location.search.split('=')[1] : '/';
    
        return (
          <>
            <FormContainer>
              <h1>Sign In</h1>
              {error && <Error variant='danger'>{error}</Error>}
              {loading && <Loader />}
              <Form onSubmit={this.submitHandler}>
                <Form.Group controlId='email'>
                  <Form.Label>Email Address</Form.Label>
                  <Form.Control
                    type='email'
                    placeholder='Enter Email'
                    value={email}
                    onChange={(e) => this.setState({ email: e.target.value })}
                  ></Form.Control>
                </Form.Group>
    
                <Form.Group controlId='password'>
                  <Form.Label>Password</Form.Label>
                  <Form.Control
                    type='password'
                    placeholder='Enter password'
                    value={password}
                    onChange={(e) => this.setState({ password: e.target.value })}
                  ></Form.Control>
                </Form.Group>
    
                <Button type='submit' variant='primary' className='mt-3'>
                  Sign In
                </Button>
              </Form>
    
              <Row className='py-3'>
                <Col>
                  New Customer?{' '}
                  <Link
                    to={redirect ? `/register?redirect=${redirect}` : '/register'}
                  >
                    Register
                  </Link>
                </Col>
              </Row>
              {console.log(this.props.userLogin)}
            </FormContainer>
          </>
        );
      }
    }
    
    const mapDispatchToProps = (state) => {
      return {
        userLogin: state.userLogin,
      };
    };
    
    export default connect(mapDispatchToProps, {
      login: login,
    })(LoginScreen);

我想检查历史记录、用户信息、重定向是否发生变化。如果它发生变化，我想重定向到主屏幕。类似的使用效果我想在类组件中做这个