当路由在Next.js中处于活动状态时，将目标活动链接定位

reactjs React.js

伽罗西里

2020-03-23

如何像在React-Router-4中那样将Next.js中的活动Link作为目标？意思是，当活动的路由处于活动状态时，给活动链接一个类吗？

第2693篇《当路由在Next.js中处于活动状态时，将目标活动链接定位》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
乐 2020.03.23

一个简单的基于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="/">home</Link>
      </li>
      <li className={router.pathname == "/about" ? "active" : ""}>
        <Link href="/about">about</Link>
      </li>
    </ul>
  );
};
ProJinJin 2020.03.23

另一个支持asprop的最低版本：

import Link from "next/link";
import {withRouter} from "next/router";
import {Children} from "react";
import React from "react";

export default withRouter(({router, children, as, href, ...rest}) => (
   <Link {...rest} href={href} as={as}>
      {React.cloneElement(Children.only(children), {
         className: (router.asPath === href || router.asPath === as) ? `active` : null
      })}
   </Link>
));

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android