我现在正在阅读这个页面：https://nextjs.org/docs/pages/api-reference/functions/use-router，它包含了这段代码。
import { useRouter } from 'next/router'
function ActiveLink({ children, href }) {
const router = useRouter()
const style = {
marginRight: 10,
color: router.asPath === href ? 'red' : 'black',
}
const handleClick = (e) => {
e.preventDefault()
router.push(href)
}
return (
<a href={href} onClick={handleClick} style={style}>
{children}
</a>
)
}
export default ActiveLink字符串
我想要的是一些示例代码，显示如何使用这个 ActiveLink 组件。
有没有什么网站或博客在网络上，我可以找到它？
2条答案
按热度按时间57hvy0tb1#
这段代码定义了组件
<ActiveLink />，并使用useRouter()来更改页面。您可以在应用中使用该组件，如下所示：字符串
默认情况下，该组件的
marginRight值为10，如果你已经在它链接的页面上，它将是黑色的或红色的。本质上，它与<a />相同，但已预先设置了样式。dojqjjoe2#
你可以在一个简单的nextjs codesandbox或者你的本地机器上在线测试和渲染这个可重用的react组件，如下所示：
字符串