反応ルータv4でアクティブリンクをどのようにスタイルすることができますか？

Question

に反応し、ルータv3では、私たちは私がV4で同じことを行うことができますどのように知りたいこの

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

ような何かを行うことができますスタイルのアクティブリンク

にactiveStyleとactiveClassNameを持っていましたか？

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 2017年5月17日：

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

Answer 3

あなたはすべてが、まだ同じように動作します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

にNavLinkでそれを行うことができます。しかし、反応ルータdom v4はLinkをNavLink

import { NavLink as Link } from 'react-router-dom';と置き換えても問題ありません。注：a:activeのスタイルを設定することができますかactiveStyle={{color: 'red'}}