时间戳

首页 > 解决方案 > 即使在单击其他链接后，属性“aria-current='page'” 和 class='active' 也不会从第一个 NavLink 中消失

reactjs - 即使在单击其他链接后，属性“aria-current='page'” 和 class='active' 也不会从第一个 NavLink 中消失

问题描述

在我的 DOM 中，我的元素如下所示：

<nav>
   <a aria-current="page" class="item_1 active" href="/">Home</a>
   <a class="item_2" href="/about">About</a>
   <a aria-current="page" class="item_3 active" href="/blog">Blog</a>
   <a class="item_4" href="/contact">Contact</a>
</nav>

即使点击了第三个链接，第一个链接也没有改变它的属性和类。

假设我有菜单组件：

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

function Menu(props) {
   const list = [{
      item: 'Home',
      itemLink: '/'
   }, {
      item: 'About',
      itemLink: '/about'
   }, {
      item: 'Blog',
      itemLink: '/blog'
   }, {
      item: 'Contact',
      itemLink: '/contact'
   }]
   const menuItems = list.map((list, index) => {
      return <NavLink className={`item_${index + 1}`} to={`${list.itemLink}`} key={index}> <span>{list.item}</span></NavLink >
   })

   return(
      <nav className="navmenu">{menuItems}</nav>
   )
}

export default Menu

和主要成分

import React, { Component } from 'react'
import Menu from './Menu'
import Home from './Home'
import About from './About'
import Contact from './Contact'
import Blog from './Blog'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'

class Main extends Component {
   render() {
      return (
         <Router>
            <div>
               <Menu />
               <Switch>
                 <Route exact path='/' component={Home} />
                 <Route path='/about' component={About} />
                 <Route path='/blog' component={Blog} />
                 <Route path='/contact' component={Contact} />
               </Switch>  
            </div>
         </Router>
      )
   }
}

export default Main

如何在单击或点击后退按钮时创建当前链接，将属性 (aria-current="page" class="active") 仅设置为当前链接而不设置为兄弟姐妹？

标签： reactjsclasshyperlink

解决方案

基于 ib @ravibagul91，解决方案将通过在 NavLink 中添加精确道具来揭示。

const menuItems = list.map((list, index) => {
   return <NavLink className={`item_${index + 1}`} to={`${list.itemLink}`} key={index} exact> <span>{list.item}</span></NavLink >
})

推荐阅读