Question

我正在使用react-router-dom，我需要在网址匹配时将红色设为红色链接，在我的网站中我有两个网址/ =＆gt;回家和/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”

如何使用react-router-dom将NavLink设置为活动状态

1 个答案: