代码之家 › 专栏 › 技术社区 › Max Wolfen

为什么在新的react路由器dom<Redirect/>中没有在setTimout内触发?

react-dom react-router-dom react-router-v4 reactjs javascript

Max Wolfen · 技术社区 · 7 年前

因此,我尝试在注销页面和重定向到主网站页面之间进行一些延迟。但我陷入了一个问题 反应路由器dom <Redirect/> 当我们把它放在 setTimeout() 属于 setInterval() 。

所以,如果我们从计时器中打开它 <重定向/> 将正常工作。

问题是什么,有什么建议吗?

我的代码:

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;

2 回复 | 直到 7 年前

Lyubomir 7 年前

你想要 render() 要返回的方法 <Redirect /> 以便进行重定向。目前 setTimeout 函数返回 <重定向/> ,但这并不影响 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的答案。

Shubham Khatri 7 年前

Redirect 需要进行渲染才能正常工作,如果要从api调用重定向,可以使用 history.push 以编程方式导航。此外,您更希望使用setState回调而不是超时

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 有关更多详细信息

即使在render中的setTimeout内添加重定向,也不会起作用,因为它不会呈现重定向,而只是setTimeout中返回的一部分