反応ルータ-domを使用してNavLinkをアクティブに設定する方法

Question

私はreact-router-domを使用しています。私は2つのURLを持っているので、URLが一致すると赤いリンクを作る必要があります/ =>/map。

現在のコードでは、別のページにルーティングできますが、ブラウザでURLが変更されたときにNavLinkが強調表示されていません。任意のアイデアを修正する方法。

import React from 'react' 
import { NavLink, Route } from 'react-router-dom' 

const Navigation = ({ onClick, id, title, tooltip, url }) => { 
    return (
    <div onClick={onClick} alt={tooltip}> 
     { <Route path={url} exact children={({ match }) => (

     <div style={match ? {color: 'red'} : {}}> 
      {match ? '> ' : ''}<NavLink to={url}>{title}</NavLink> 
     </div> 
)} />} 
    </div > 
) 
} 

export default Navigation 

const Root = ({ store }) => (
     <Provider store={store}> 
     <Router> 
      <Switch> 
      <Route exact path='/' component={Forecast} /> 
      <Route exact path='/map' component={Map} /> 
      </Switch> 
     </Router> 
     </Provider> 
    ) 

Answer 1

あなたのアプローチはちょっと混乱します。しかし、ナビゲートされているアクティブリンクを強調表示したい場合は、アクティブクラス名をNavLinkに追加するだけです。この

<NavLink to={url} exact activeClassName="activeLink" style=>{title}</NavLink> 

ような何かアクティブリンクのためのCSS：

.activeLink { 
    color: red; 
} 

* 反応-ルータ-DOMを： "^ 4.1.2"