重定向（react-router-dom）在反应 class 组件中不起作用

Question

我试图在用户成功注册后重定向到特定路由，但重定向不起作用。 我确实在渲染之前降落在 componentDidMount 的条件内，它需要重定向到该路由但它没有

我想在 componentDidMount function 中返回它

我怎样才能度过这种情况？

import { Alert, Button, Form, FormGroup, Label, Input, Container, FormFeedback } from 'reactstrap';
import { connect } from 'react-redux';
import { register } from '../../actions/authActions'
import { Redirect } from 'react-router-dom'
// import PropTypes from 'prop-types'


class Register extends Component {

    state = {
        firstname: '',
        lastname: '',
        email: '',
        password: '',
        confirmPassword: '',
        role: '',
        firstnameError: null,
        lastnameError: null,
        emailError: null,
        passwordError: null,
        confirmPasswordError: null,
        roleError: null,
        msg: null,
    }



    onChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        });

    };

    validate = () => {
        let isError = false;
        const { firstname, lastname, email, password, confirmPassword, role } = this.state;
        if (firstname === '') {
            this.setState({
                firstnameError: "First Name is Required"
            });
            isError = true
        }
        if (lastname === '') {
            this.setState({
                lastnameError: "Last Name is Required"
            });
            isError = true
        }

        if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))) {
            this.setState({
                emailError: "Enter Correct Email Format"
            });
            isError = true
        }

        if (email === '') {
            this.setState({
                emailError: "Email is Required"
            });
            isError = true
        }


        if (password === '') {
            this.setState({
                passwordError: "Password is Required"
            });
            isError = true
        }
        if (password.length < 6) {
            this.setState({
                passwordError: "Password length should be greater than 6 characters"
            });
            isError = true
        }

        if (password !== confirmPassword) {
            this.setState({
                confirmPasswordError: "Confirm Password should match the Password"
            });
            isError = true
        }
        if (confirmPassword.length < 6) {
            this.setState({
                passwordError: "Confirm Password length should be greater than 6 characters"
            });
            isError = true
        }
        if (role === '') {
            this.setState({
                roleError: "Select a role"
            });
            isError = true
        }
        return isError
    }


    onSubmit = (e) => {
        e.preventDefault();
        this.setState({
            firstnameError: null,
            lastnameError: null,
            emailError: null,
            passwordError: null,
            confirmPasswordError: null,
            roleError: null
        })
        const isError = this.validate();
        if (!isError) {
            const { firstname, lastname, email, password, role, error } = this.state;
            const newUser = {
                firstname,
                lastname,
                email,
                password,
                role
            };
            this.props.register(newUser);
            console.log(newUser)

        }
    };

    componentDidUpdate(prevProps) {
        const { error } = this.props;
        console.log("outside");
        if (error != prevProps.error) {
            console.log("inside");
            if (error.id === 'REGISTER_FAIL') {
                this.setState({ msg: this.props.error.msg })
                console.log("inside error");
            }
            else if (error.id === null) {
                this.setState({ msg: null })
                console.log("inside login");
                return (<Redirect to="/some" />);
            }
        }
    }
    render() {
        return (
            <Container className="mt-5">
                {this.state.msg ? <Alert color="danger">{this.state.msg}</Alert> : null}
                <Form onSubmit={this.onSubmit}>
                    <FormGroup>
                        <Label for="firstname">First Name</Label>
                        <Input onChange={this.onChange} type="firstname" name="firstname" id="firstname" placeholder="First Name"
                            invalid={this.state.firstnameError !== null}
                            valid={this.state.firstnameError == null && this.state.firstname.length > 0} />
                        <FormFeedback valid="true">Alright</FormFeedback>
                        <FormFeedback invalid="true">{this.state.firstnameError}</FormFeedback>
                    </FormGroup>
                    <FormGroup>
                        <Label for="lastname">Last Name</Label>
                        <Input onChange={this.onChange} type="lastname" name="lastname" id="lastname" placeholder="Last Name"
                            invalid={this.state.lastnameError !== null}
                            valid={this.state.lastnameError == null && this.state.lastname.length > 0} />
                        <FormFeedback valid="true">Alright</FormFeedback>
                        <FormFeedback invalid="true">{this.state.lastnameError}</FormFeedback>
                    </FormGroup>
                    <FormGroup>
                        <Label for="email"> Email </Label>
                        <Input onChange={this.onChange} type="email" name="email" id="email" placeholder="Email"
                            invalid={this.state.emailError !== null}
                            valid={this.state.emailError == null && (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(this.state.email))} />
                        <FormFeedback valid="true">Alright</FormFeedback>
                        <FormFeedback invalid="true">{this.state.emailError}</FormFeedback>
                    </FormGroup>
                    <FormGroup>
                        <Label for="password">Password</Label>
                        <Input onChange={this.onChange} type="password" name="password" id="password" placeholder="Password"
                            invalid={this.state.passwordError != null}
                            valid={this.state.passwordError == null && this.state.password.length > 6} />
                        <FormFeedback valid="true">Alright</FormFeedback>
                        <FormFeedback invalid="true">{this.state.passwordError}</FormFeedback>
                    </FormGroup>
                    <FormGroup>
                        <Label for="confirmPassword">Confirm Password</Label>
                        <Input onChange={this.onChange} type="password" name="confirmPassword" id="confirmPassword" placeholder="Confirm Password"
                            invalid={this.state.confirmPasswordError != null}
                            valid={this.state.confirmPasswordError == null && this.state.confirmPassword.length > 6} />
                        <FormFeedback valid="true">Alright</FormFeedback>
                        <FormFeedback invalid="true">{this.state.confirmPasswordError}</FormFeedback>
                    </FormGroup>
                    <FormGroup>
                        <Label for="role">Role</Label>
                        <Input onChange={this.onChange} type="select" name="role" id="role"
                            invalid={this.state.roleError != null}
                            valid={this.state.roleError == null && this.state.role.length > 0}>
                            <option value='' >Select from below roles</option>
                            <option value="student">Student</option>
                            <option value="Instructor">Professor / Instructor</option>
                            <option value="Professional">Industry Professional</option>
                        </Input>
                        <FormFeedback valid="true">Alright</FormFeedback>
                        <FormFeedback invalid="true">{this.state.roleError}</FormFeedback>
                    </FormGroup>

                    <Button>Submit</Button>
                </Form>
            </Container>
        );
    }
}

const mapStateToProps = state => ({
    error: state.error,
    user: state.auth.user
})
export default connect(mapStateToProps, { register })(Register)

Answer 1

我认为您的意思是 componentDidUpdate function。 我在这里根本看不到 componentDidMount function。 你为什么不直接使用：

this.props.history.push({pathname: '/some'});

Answer 2

你不能从除了render之外的任何生命周期组件渲染 JSX。 但是，您可以在渲染 function 中返回Redirect ，或者使用history路由道具推送新路由或替换当前路由。 对于history道具，您的组件Register需要由Route的render 、 component或children道具或withRouter HOC 直接渲染。

渲染重定向

componentDidUpdate(prevProps) {
  const { error } = this.props;
  console.log("outside");
  if (error != prevProps.error) {
    console.log("inside");
    if (error.id === 'REGISTER_FAIL') {
      this.setState({ msg: this.props.error.msg })
      console.log("inside error");
    } else if (error.id === null) {
      this.setState({ msg: null, redirect: true })
    }
  }
}

...

render() {
  if (this.state.redirect) {
    return <Redirect to="/some" />;
  }
  ...

以编程方式替换路由

这是withRouter装饰器的示例：

首先，装饰你导出的Register组件

import { withRouter } from 'react-router-dom';

export default withRouter(
  connect(mapStateToProps, { register })(Register),
);

或者

import { compose } from 'redux';
import { withRouter } from 'react-router-dom';

export default compose(
  withRouter,
  connect(mapStateToProps, { register }),
)(Register);

其次（或者如果Register已经有route-props ），使用现在添加的history道具：

componentDidUpdate(prevProps) {
  const { error } = this.props;
  console.log("outside");
  if (error != prevProps.error) {
    console.log("inside");
    if (error.id === 'REGISTER_FAIL') {
      this.setState({ msg: this.props.error.msg })
      console.log("inside error");
    } else if (error.id === null) {
      this.setState({ msg: null })
      console.log("inside login");
      this.props.history.replace("/some");
    }
  }
}