索引的 activeSyle 在 Gatsby 中始终为真-link

Question

我遇到了一个问题，我试图解决但没有成功。 activeStyle 有效，但当切换到另一个页面（如“/about”）时，Home 或“/”始终处于活动状态。有人对此有解决方案吗？或者任何人都可以告诉我我做错了什么？

下面的文件是索引布局——我的 Gatsby 项目中所有页面的通用标记。感谢您的帮助。

import React from "react"
import Link from "gatsby-link"
import styles from "./index.module.css";
console.log(styles);

const ListLink = props =>
  <li style={{ display: `inline-block`, marginRight: `1rem` }}>
    <Link to={props.to} activeStyle={{ color: 'yellow' }}>
      {props.children}
    </Link>
  </li>

export default ({ children }) => (
    <div className={styles.container}>
        <div className={styles.sidebar}>
            <Link to="/">
                <h1>Header</h1>
            </Link>
            <ul className={styles.nav}>
                <ListLink to="/">Home</ListLink>
                <ListLink to="/about/">About</ListLink>
            </ul>
        </div>
        <div className={styles.main}>
            {children()}
        </div>
    </div>
);

[已解决]

将精确添加到<Link exact to={props.to} activeStyle={{ color: 'yellow' }}>。现在完美了。

Answer 1

将精确添加到<Link exact to={props.to} activeStyle={{ color: 'yellow' }}>。到时候应该可以了！

索引的 activeSyle 在 Gatsby 中始终为真-link

activeSyle for index is always true in Gatsby-link

reactjs

gatsby