[英]How to keep current tabIndex when navigating between NextJS pages
a Simple solution based on the useRouter
hook:基于
useRouter
钩子的简单解决方案:
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="/">API</Link>
</li>
<li className={router.pathname == "/users" ? "active" : ""}>
<Link href="/users">Users</Link>
</li>
</ul>
);
};
You can use withRouter()
library to figure out current URL and match it with the page URL and then add a different class with border
or background-color
to differentiate between them您可以使用
withRouter()
库找出当前 URL 并将其与页面 URL 进行匹配,然后添加带有border
或background-color
的不同类来区分它们
You can also go with a much easier method and use :active
and :visited
selectors of CSS with the nav-item
class or element.您还可以使用更简单的方法,将 CSS 的
:active
和:visited
选择器与nav-item
类或元素一起使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.