Await react router history.goBack

Question

我想在使用历史记录的表单中单击提交按钮后向后导航。goBack，但在没有上一页/历史记录的情况下，我想导航到一个屏幕与感谢信息使用history.replace.

const handleSubmit = () => {
history.goBack(); // will do nothing if there's no previous history
// If no prev history
history.replace({pathname: `${url}/submit`});
}

对于有先前历史记录的情况，history。goBack将导航到前一页，但它是异步的和历史的。代替同步，它首先导航到/submit页面，然后导航到历史记录。执行goBack。如何等待history.goBack的执行?

Answer 1

const handleSubmit = () => {
if (history.length > 2) {
// if history is not empty, go back:
window.History.back();
} else if (url) {
// go to specified fallback url:
window.History.replaceState(null, null, url);
} else {
// go home:
window.History.replaceState(null, null, '/');
}
}

试试这个，这是来自这篇文章的答案，如何检查用户是否可以回到浏览器历史记录，但它并不总是工作。

依我看，你的任务无法完成，因为没有办法判断是否有以前的历史。此外，你以前存储在React中的历史记录与浏览器历史记录无关，因为用户可以先访问google.com，然后到达你的网站。所以实现这个是行不通的。更不用说React本身是一个单URL应用程序，这当然会使事情变得有点复杂。

Answer 2

您可以尝试检查用户是否来自其他路由:

通过检查历史操作:

const handleSubmit = () => {
if (history.action !== 'POP') {
history.goBack();
}
history.replace({pathname: `${url}/submit`});
}

action === 'POP'表示它是页面的初始加载，当用户来自外部URL

时，它也起作用。

Answer 3

history.goBack();
// Register a popstate listener that executes only once during the next history entry change
window.addEventListener('popstate', onPopStateCallback, {once: true});

创建一个onPopStateCallback，你可以在回调中做替换