reactjs - 属性 "aria-current=' 页面 '"with class=' 事件'即使在单击其他链接后也不会从第一个 NavLink 中消失

Question

在我的 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") 仅设置为当前链接而不是兄弟链接？

Answer 1

基于 ib @ravibagul91，解决方案将通过在 NavLink 中添加 exact prop 来揭示。

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