Как я могу активировать активную ссылку в response-router v4?

Question

В реакции-маршрутизатор v3 мы имели activeStyle и activeClassName в стиле активной ссылки

мы могли бы сделать что-то вроде этого

<div id="tags-container"> 
    {tags.map(t => 
     <Link 
     className="tags" 
     activeStyle={{ color: 'red' }} 
     to={t.path} 
     > 
     {t.title} 
     </Link> 
    )} 
    </div> 

Я хочу знать, как я могу сделать то же самое в v4?

Answer 1

Этот пример из реакции маршрутизаторами v4 custom link documentation поможет вам выполнить его:

const OldSchoolMenuLink = ({ label, to, activeOnlyWhenExact }) => (
    <Route path={to} exact={activeOnlyWhenExact} children={({ match }) => (
    <div className={match ? 'active' : ''}> 
     {match ? '> ' : ''}<Link to={to}>{label}</Link> 
    </div> 
)}/> 
); 

Так что в вашем случае вы можете создать следующие компоненты:

const CustomLink = ({ activeStyle, children, className, to, activeOnlyWhenExact }) => (
    <Route path={to} exact={activeOnlyWhenExact} children={({ match }) => (
    <Link to={to} className={className} style={match && activeStyle}>{children}</Link> 
)}/> 
); 

И затем использовать его как:

<div id="tags-container"> 
    {tags.map(t => 
     <CustomLink 
     className="tags" 
     activeStyle={{ color: 'red' }} 
     to={t.path} 
     > 
     {t.title} 
     </Link> 
    )} 
    </div> 

Answer 2

Используйте NavLink вместо ссылки. Его не документировано, но его работа, как вы ожидаете. https://github.com/ReactTraining/react-router/issues/4318

UPDATE 17.05.2017:

https://reacttraining.com/react-router/web/api/NavLink

Answer 3

Вы можете сделать это с NavLink в react-router v4

<div id="tags-container"> 
    {tags.map(t => 
    <NavLink 
     className="tags" 
     activeStyle={{ color: 'red' }} 
     to={t.path} 
    > 
     {t.title} 
    </NavLink> 
    )} 
</div> 

Answer 4

все все еще работает так же. Однако реакция-маршрутизатор-dom v4 заменит Link на NavLink

import { NavLink as Link } from 'react-router-dom'; также хорошо. Примечание. Navlinks по умолчанию активен, поэтому вы можете установить стиль a:active или activeStyle={{color: 'red'}}