Javascript 如何使用react路由器dom将导航链接设置为活动

我使用的是react路由器dom，当url匹配时，我需要创建一个红色链接，在我的up中，我有两个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>
    )

从“React”导入React
从“react router dom”导入{NavLink，Route}
常量导航=（{onClick，id，title，tooltip，url}）=>{
返回(
{  (
{匹配？'>'：''}{title}
)} />}
)
}
导出默认导航
常量根=（{store}）=>(
)

你的方法有点混乱。但是如果您想突出显示导航的活动链接，只需将activeClassName添加到导航链接中即可。像这样的

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

---

*反应路由器dom:“^4.1.2”

是正确的，我想将映射URL的链接标记为活动链接。谢谢我尝试过这种方法，但是url没有被正确地标记为激活。我正在添加我的路由器文件，你能告诉我怎么了吗？

.activeLink {
    color: red;
 }