as shown in the figure below, I implemented it in the form of activeClassName , but the class selected in the first menu will not disappear.
< NavLink activeClassName= "cur" to= {item.path} > {item.name} < / NavLink >
import React, { Component } from "react";
import { NavLink } from "react-router-dom"
class Head extends Component{
render(){
let navs = [
{
path:"/",
name:""
},
{
path:"/profile",
name:""
},
{
path:"/product",
name:""
},
{
path:"/content",
name:""
}
]
return (
<header>
<nav>
{
navs.map((item,i) => {
return <li key={i} ><NavLink activeClassName="cur" to={item.path}>{item.name}</NavLink></li>
})
}
</nav>
</header>
)
}
}
export default Head;