Как activeClassName работает с компонентом Link?

Question

Как в заголовке - как activeClassName param работает с react-router-dom Link компонентом?Что это значит, что какой-то класс активен?В документах мы можем найти только:

className a <Link> получает, когда его маршрут активен.По умолчанию нет активного класса.

Но без объяснения, что такое активный маршрут на самом деле.

Редактировать: хорошо, теперь, поняв это, я могу видетьчто я мог догадаться, что означает эта фраза.Но я все еще думаю, что это было довольно странно.

Answer 1

Если URL совпадает с to вашего Link, activeClassName будет назначено вашему тегу привязки. Предположим, у вас есть 3 вкладки:

<Link to='/tab-1' activeClassName="red-text">Tab 1</Link>
<Link to='/tab-2' activeClassName="red-text">Tab 2</Link>
<Link to='/tab-3' activeClassName="red-text">Tab 3</Link>

Если ваш текущий URL-адрес site.com/tab-2, только имя вкладки 2 будет иметь имя класса red-text, другие вкладки не будут иметь его.

Приведенный выше код будет отображаться так, как показано ниже, когда URL-адрес site.com/tab-2, поэтому вкладка 2 будет выделена.

<a href='/tab-1'>Tab 1</Link>
<a href='/tab-2' class="red-text">Tab 2</Link>
<a href='/tab-3' >Tab 3</Link>

Пример здесь .