Question

我遇到了一个问题，我试图解决但没有成功。 activeStyle的工作原理除了Home或＆＃34; /＆＃34;切换到＆＃34; / about＆＃34;等其他页面时始终处于活动状态。有人有解决方案吗？或者任何人都可以告诉我我做错了什么？

下面的文件是索引布局 - 我的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' }}>。它应该工作了！

在Gatsby-link中，activeSyle for index始终为true

1 个答案: