反应activeClassName重复

Question

对不起我不擅长英语。

我正在使用React js

进行开发

我正在使用activeClassName()，但我遇到了麻烦。

我正在尝试构建我的网站URL。

1. localhost:3000/icons/

2. localhost:3000/icons/docs/

3. localhost:3000/icons/tutorial/

和我的代码

import React from 'react';
import { NavLink } from 'react-router-dom';
import styles from './Header.scss';
import classNames from 'classnames/bind';

const cx = classNames.bind(styles);


const Header = () => (
  <div className={cx('Header')}>
    <NavLink className={cx('title')} to="/icons">React Gotsu Icons</NavLink>
    <ul>
      <li>
        <NavLink to="/icons" activeClassName={cx('active')}>Icons</NavLink>
      </li>
      <li>
        <NavLink activeClassName={cx('active')} to="/icons/docs">Docs</NavLink>
      </li>
      <li>
        <NavLink activeClassName={cx('active')} to="/icons/tutorial">Tutorial</NavLink>
      </li>
    </ul>
  </div>
);


export default Header;

我遇到了什么麻烦。







我想做什么

Answer 1

您的/ icons链接始终处于活动状态，因为您使用的每个网址都以/ icons开头。

您可以为/ icons链接设置名为exact的属性。然后只有在URL完全是“/ icons”而不是“/ icons / docs”

时它才会被激活

<NavLink exact to='/' className='title'>Home</NavLink>

link with another example