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

Question

因此，我尝试在注销页面和重定向到主网站页面之间做一些延迟。但是我陷入了这个问题，当我们把 react-router-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

Redirect 需要渲染才能工作，如果你想从 api 调用重定向，你可以使用 history.push 以编程方式导航。你也宁愿使用 setState 回调而不是 timeout

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

查看Programmatically Navigate using react-router了解更多详情

即使您在渲染中的 setTimeout 中添加重定向，它也不会工作，因为它不会渲染它，而只是成为 setTimeout

中 return 的一部分

Answer 2

您希望 render() 方法到 return <Redirect /> 以便进行重定向。当前 setTimeout 函数 return 是 <Redirect />，但这不会影响 render() 本身的结果。

因此，render() 应该简单地 return <Redirect /> 如果 this.state.navigate 是 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 的回答。

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

Why in the new react-router-dom <Redirect/> does not fire inside the setTimout?

javascript

reactjs

react-router-v4

react-router-dom

react-dom