为什么在新的react-router-dom <Redirect />中不会在setTimout内部触发？

Question

因此，我尝试在注销页面和重定向到主网站页面之间进行一些延迟。但是，我陷入了问题，该反应路由器-DOM <Redirect/>方法并不想火的时候，我们把它里面setTimeout()的setInterval()。

因此，如果我们将其从计时器中解开，<Redirect/>它将正常工作。

问题是什么，有什么建议吗？

我的代码：

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import axios from 'axios';

class LogoutPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            navigate: false
        }
    }

    componentDidMount(e) {
        axios.get('http://localhost:3016/logout')
        .then(
            this.setState({
                navigate: true
            }),
        )
        .catch(err => {
            console.error(err);
        });

        if (this.state.navigate) {
            setTimeout(() => {
                return <Redirect to="/employers" />
            }, 2000);
        }
    };

    render() {
        if (this.state.navigate) {
            setTimeout(() => {
                 return <Redirect to="/employers" />
            }, 2000);
        }
        return (
            <div>You successfully logouted</div>
        )
    }
}

export default LogoutPage;

Answer 1

您希望render()方法返回<Redirect />以便进行重定向。当前，该setTimeout函数返回一个<Redirect />，但这并不影响其render()自身的结果。

因此，render()应改为return <Redirect /> if this.state.navigateis，true然后将setState({ navigate: true })方法延迟2秒。

这是一种纠正的声明式方法：

class LogoutPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            navigate: false
        }
    }

    componentDidMount(e) {
        axios.get('http://localhost:3016/logout')
        .then(() => setTimeout(() => this.setState({ navigate: true }), 2000))
        .catch(err => {
            console.error(err);
        });

    };

    render() {
        if (this.state.navigate) {
          return <Redirect to="/employers" />
        }

        return (
          <div>You successfully logouted</div>
        );
    }
}

有关命令式版本，请参见@Shubham Khatri的答案。