有没有一种方法可以通过编程方式添加到浏览器历史堆栈中,以便下一个路由器将导航到router.back()上新添加的路径?我已经尝试了window.history.pushState({}, '', "/my_new_route"),但它不能正确地与下一个路由器。router.back()不会做任何事情的第一次调用。在第二次调用,它将然后导航到历史堆栈上的路由之前,自定义添加的一个,如预期的那样。
router.back()
window.history.pushState({}, '', "/my_new_route")
kx7yvsdv1#
要在不导航Next.js的情况下向历史堆栈添加新路径,可以使用next/router模块的push方法,并将as选项设置为新路径。下面是演示如何执行此操作的示例代码片段:
import { useRouter } from 'next/router'; function MyComponent() { const router = useRouter(); function addToHistoryStack() { router.push('/my_new_route', undefined, { shallow: true, as: '/my_new_route' }); } return ( <button onClick={addToHistoryStack}>Add to History Stack</button> ); }
在本例中,单击按钮时会调用addToHistoryStack函数。它使用router.push方法将新路径添加到历史堆栈中,而无需实际导航到它。shallow选项设置为true以避免再次为当前页面运行getInitialProps,而as选项设置为新路径以使用新路径更新浏览器的地址栏。通过使用此方法,调用router.back()将在第一次调用时导航到新添加的路径,然后在后续调用中导航到自定义添加的路径之前的历史堆栈上的路由,正如预期的那样。
1条答案
按热度按时间kx7yvsdv1#
要在不导航Next.js的情况下向历史堆栈添加新路径,可以使用next/router模块的push方法,并将as选项设置为新路径。
下面是演示如何执行此操作的示例代码片段:
在本例中,单击按钮时会调用addToHistoryStack函数。它使用router.push方法将新路径添加到历史堆栈中,而无需实际导航到它。shallow选项设置为true以避免再次为当前页面运行getInitialProps,而as选项设置为新路径以使用新路径更新浏览器的地址栏。
通过使用此方法,调用router.back()将在第一次调用时导航到新添加的路径,然后在后续调用中导航到自定义添加的路径之前的历史堆栈上的路由,正如预期的那样。