点击它后，React-router <navlink>组件不会激活

Question

以下是我在<NavLink>库中使用react-router-dom的组件代码。点击它并将网址更改为to道具中指定的内容后，我在activeStyle道具中指定的样式不会按预期显示。

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
import styles from './../../styles/components/ListLabel.css'

class ListLabel extends Component {
  render() {
    const { name, id } = this.props

    return (
      <NavLink
        to={`/list/${id}`}
        style={{ textDecoration: 'none', color: 'inherit' }}
        activeStyle={{ fontWeight: 'bold' }}
      >
        <div className={styles['list-label']}>
          <div className={styles['name']}>
            {this.props.name}
          </div>
          <i className={styles['settings-button']} />
        </div>
      </NavLink>
    )
  }
}

export default ListLabel

这是路线：

<Content>
  <Route path="/list/:listId" component={ListContent} />
</Content>

可能出现什么问题？