Nextjs 带有样式组件的活动导航栏

Question

我刚开始学习 Nextjs，我有这个导航栏是用 styled-components 制作的。但问题是我试图在导航栏上突出显示当前页面，但无法弄清楚。

.js file

import React, { useState } from 'react'
import styled from 'styled-components'
import Link from 'next/link'
import { useRouter } from 'next/router'

...

const Header = () => {
  const [toggle, toggleNav] = useState(false)
  const router = useRouter();
    
  return (
    <>
      <ul>
        <li className={router.pathname == "/home" ? "active" : ""}>
          <Link href="/home">Home</Link>
        </li>
        <li className={router.pathname == "/about_us" ? "active" : ""}>
          <Link href="/about_us">About Us</Link>
        </li>
      </ul>
    </>
  )
}

globals.css

li.active {
    color: red;
}

Answer 1

import styled from 'styled-components'
const ListItem = ({ className, children, isActive }) => (
  isActive ? <NormalListItem className={className}>
    {children}
  </NormalListItem> : <ActiveListItem className={className}>
    {children}
  </ActiveListItem>
);
const NormalListItem = ({ className, children }) => (
  <li className={className}>
    {children}
  </li>
);

const ActiveListItem = styled(NormalListItem)`
  color: red;
`;

在组件中：

import React, { useState } from 'react'
import styled from 'styled-components'
import Link from 'next/link'
import { useRouter } from 'next/router'

...

const Header = () => {
  const [toggle, toggleNav] = useState(false)
  const router = useRouter();
    
  return (
    <>
      <ul>
        <ListItem className="list-class" isActive={router.pathname == "/home"}>
          <Link href="/home">Home</Link>
        </ListItem>
        <ListItem className="list-class" isActive={router.pathname == "/about_us"}>
          <Link href="/about_us">About Us</Link>
        </ListItem>
      </ul>
    </>
  )
}

您可以为您的组件尝试这种解决方案。