如何像我们在 React-Router-4 中那样定位 Next.js 中的事件链接? 意思是,当事件链接的路由处于事件状态时,为事件链接指定一个类?
最佳答案
基于 useRouter
Hook 的简单解决方案:
import Link from "next/link";
import { useRouter } from "next/router";
export const MyNav = () => {
const router = useRouter();
return (
<ul>
<li className={router.pathname == "/" ? "active" : ""}>
<Link href="/">home</Link>
</li>
<li className={router.pathname == "/about" ? "active" : ""}>
<Link href="/about">about</Link>
</li>
</ul>
);
};
如果您想包含 url 查询参数,您还可以使用 router.asPath
而不是 router.pathname
。如果您想处理诸如 /#about
之类的 anchor 标记,这会很有用。
关于reactjs - 当 Next.js 中的路由处于事件状态时定位事件链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53262263/