每当我在ReactJS中按下Web浏览器的后退按钮时,如何返回导航菜单或任何Div的先前活动状态?

时间:2019-09-24 10:35:59

标签: reactjs react-router components classname

假设我有四个组成部分;主页,关于,博客和联系方式。在导航菜单中,将项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

我希望有人能帮上忙。谢谢。

0 个答案:

没有答案