如何使用react-router-dom將NavLink設置爲活動狀態

Question

我正在使用react-router-dom，並且我需要在URL匹配時使鏈接變成紅色，在我的up中，我有兩個網址/ =>/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

你的方法有點混亂。但是，如果您要突出顯示導航的活動鏈接，只需將activeClassName添加到您的NavLink。事情是這樣的

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

CSS的activeLink：

.activeLink { 
    color: red; 
} 

* 反應路由器-DOM： 「^ 4.1.2」