在 nextjs 路由器上。路由器推送后如何获取路径答案

【问题标题】：at nextjs router. how to get path after router push在 nextjs 路由器上。路由器推送后如何获取路径
【发布时间】：2023-02-14 13:00:13
【问题描述】：

我正在制作一个网站，这是其中的一部分。假设我在“主页”页面。我将转到“服务”页面。

我想获取“服务”页面的路径。（我想在“路由器推送”之后像“/服务”一样。

但我的代码显示“/”（在“路由器推送”的路径之前）

如何在“路由器推送”之后获得当前路径，而不是以前的路径？

谢谢。


import Link from 'next/link'
import { useRouter } from "next/router"

const SideBar = (props) => {
  const router = useRouter()
  const handleClick = (e, path) => {
    e.preventDefault()
    props.toggleMenu()
    router.push(path)
    console.log( router.pathname ) // this shows path "before router push"    
  }
 return (
    <div className="sidebar">
       <Link href="/">
         <a onClick={(e)=> handleClick(e, "/")} >HOME</a>
       </Link>
       <Link href="/service">
         <a onClick={(e)=> handleClick(e, "/service")} >SERVICE</a>
       </Link>
    </div>
 )
}
export default SideBar

【问题讨论】：

标签： reactjs next.js path router

【解决方案1】：

当 console.log 被触发时，您还没有导航到新路由。

如果您想在路由后使用 console.log，则需要设置一个函数以在路由更改后触发。

在这种情况下，您需要在 _app.js 文件中设置一个“on”事件侦听器：

router.events.on('routeChangeComplete', () => console.log(router.pathname))

【讨论】：

const handleRouteChange = (url) => { console.log(url) } router.events.on('routeChangeComplete', handleRouteChange) return () => { router.events.off('routeChangeComplete', handleRouteChange) } //这个“url”是我想要的值。谢谢。

【解决方案2】：

使用 router.pathname 获取当前路径。 router.asPath 通过查询获取当前路径。

假设您的网址是 http://localhost:3000/service?serviceId=1

const router = useRouter();

console.log(router.pathname); // returns /service
console.log(router.asPath); //returns /service?serviceId=1

【讨论】：

谢谢你的回复。 router.pathname 返回“在路由器推送路径之前”.. 并且 router.asPath 也同样重新运行.. （我编辑了我的问题。我的意思是“router.pathname”返回先前路径的路径名。
我建议您尝试@Josh 的回答。 router.events 文档可以在here 找到

【解决方案3】：

这行得通。

const handleRouteChange = (url) => {
  console.log(url);
};
router.events.on("routeChangeComplete", handleRouteChange);
return () => {
  router.events.off("routeChangeComplete", handleRouteChange);
};

这个“url”是我想要的值。谢谢。

【讨论】：

【解决方案4】：

如果您被允许使用 window.location，那么您可以将它与 setTimeout 一起使用。

const handleClick = (e, path) => {
    router.push(path)
    setTimeout(() => {
      console.log( window.location.pathname)
    }, 0)   
  }

我在这里使用window.location 的原因是router.pathname，或者当我尝试其他答案时asPath 对我不起作用（不确定是什么原因）。但这里的主要想法是setTimeout 使其异步，以便在同步代码完成执行时触发它。

【讨论】：