Question

componentDidMount() {
    if (sessionStorage.loggedInUser === undefined && localStorage.loggedInUser === undefined) {
        this.props.history.push("/");
    }
    //Check if user owns the car to see if we should send the ajax

    ajax.request.get("/cars/all").then((allCars) => {

        this.setState({
            allCars: allCars
        })
    })

}

componentWillMount() {
    if (sessionStorage.loggedInUser === undefined && localStorage.loggedInUser === undefined) {
        this.props.history.push("/");
    }
}

我有这些方法，我通过调试看到代码正在通过它们，但在重定向之后它转到render方法并开始执行它。为什么呢？

Answer 1

我还没有对此进行测试，但我认为您需要使用此方法

this.history.replace("/")

Answer 2

一旦您开始安装组件的过程，它的生命周期方法就在队列中。在幕后，反应是运行这些方法来生成＆＃34;虚拟dom＆＃34;。即使结果从未完全传达给用户，仍然需要执行它们以作出内部反应。

从外观上看，似乎你想要的是一种中断反应路由器页面转换并将用户重定向到索引页面的方法。这绝对是可能的，但componentDidMount钩子不适合它。

你想要的是反应路由器路由组件上的onEnter钩子，你可以在安装过程开始之前用它来防止或重定向。

这是（愚蠢地）从V4中的反应路由器中移除，社区......对此并不感到兴奋。你的用例是一个完美的例子，说明为什么它是一个必要的钩子，为什么我会建议坚持反应路由器的V3，直到这个钩子被带回当前版本。

Reactjs，render（）在重定向后执行

2 个答案: