假设我有四个组成部分;主页,关于,博客和联系方式。在导航菜单中,将项home或元素的className设置为active。另外,在Home组件中,某些classNames设置为active。单击“导航”菜单中的其他三个项目(“关于”,“博客”,“联系人”)后,这些项目也被设置为活动状态。我的问题是,每当我按下浏览器的“后退”按钮时,组件也会返回到它们的位置,而活动的导航项保持不变。如何根据当前的活动组件将导航项设置为活动状态?
这是我的“导航”菜单:
import React, { useState } from 'react'
import { Link } from 'react-router-dom'
function Menu(props) {
const list = props.list
const [active, setActive] = useState(0)
const menuItems = list.map((list, index) => {
return <li className={`item_${index + 1} ${active === index ? 'active' : ''}`} key={index} onClick={() => setActive(index)}> <Link className="links" to={`${list.itemLink}`}>{list.item}</Link></li >
})
return(
<ul className="navmenu">{menuItems}</ul>
)
}
export default Menu
这是主要内容:
import React, { Component } from 'react'
import Menu from './Menu'
import Home from './Home'
import About from './About'
import Blog from './Blog'
import Contact from './Contact'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
class Main extends Component {
constructor() {
super()
this.state = {
list: [{
item: 'Home',
itemLink: '/'
},{
item: 'About',
itemLink: '/about'
},{
item: 'Blog',
itemLink: '/blog'
},{
item: 'Contact',
itemLink: '/contact'
}]
}
}
render() {
return (
<Router>
<div id="main" className="main">
<Menu list={this.state.list}/>
<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
我希望有人能帮上忙。谢谢。