React-router v2：如何在回调中使用 'replace' 函数

Question

在 React-router 中使用 "onEnter" 属性时，replace() 函数在回调中对我不起作用。当以同步方式（而不是回调）调用时它工作正常：

function verifyEmail(nextState, replace) {
     replace({pathname: '/list'});
}

<Route path="/" component={App}>
        <Route path="/verify-email/:token" component={AppNotFound} onEnter={verifyEmail}/>
</Route>

但是，当它在这样的回调中使用时它会停止工作：

function verifyEmail(nextState, replace) {
    console.log("replace", replace);
    Accounts.verifyEmail( nextState.params.token, function(error){
        if ( error ) {
            console.log(error.reason);
        } else {
            console.log("verified successfully!");
            replace({pathname: '/list'});
        }
    });
}

<Route path="/" component={App}>
        <Route path="/verify-email/:token" component={AppNotFound} onEnter={verifyEmail}/>
</Route>

控制台日志将显示 "verified successfully"，但实际上不会重定向页面。

Answer 1

您可能需要为 verifyEmail 函数传入第三个参数 "callback"，因为该方法是异步的。

在此处查看文档：https://github.com/reactjs/react-router/blob/master/docs/API.md#onenternextstate-replace-callback

onEnter(nextState, replace, callback?)

Called when a route is about to be entered. It provides the next router state and a function to redirect to another path. this will be the route instance that triggered the hook.

If callback is listed as a 3rd argument, this hook will run asynchronously, and the transition will block until callback is called.

所以你的代码应该是：

function verifyEmail(nextState, replace, callback) {
    console.log("replace", replace);
    Accounts.verifyEmail( nextState.params.token, function(error){
        if ( error ) {
            console.log(error.reason);
            callback(); //When async finishes, do the redirect
        } else {
            console.log("verified successfully!");
            replace({pathname: '/list'});
            callback(); //When async finishes, do the redirect
        }
    });
}

React-router v2：如何在回调中使用 'replace' 函数

React-router v2: how to use the 'replace' function in callbacks

react-router

meteor-accounts