Реагировать на дублирование 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 всегда активна, потому что каждый используемый вами URL начинается с / icons.

Есть свойство exact, которое вы можете установить для ссылки / icons. Тогда он будет активен только в том случае, если URL соответствует «/ icons», а не «/ icons / docs»

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

ссылка с другим примером