javascript - 如何使用 react-router-dom 将 NavLink 设置为事件状态

Question

我正在使用 react-router-dom，我需要在 url 匹配时创建一个红色链接，在我的 up 中我有两个 url / => home 和 /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>

activeLink 的 CSS:

.activeLink {
    color: red;
 }

* react-router-dom: "^4.1.2"