Как вернуться в предыдущее активное меню навигационного меню или любого Div, когда я нажимаю кнопку «Назад» в браузере в ReactJS? - PullRequest
Новая
       17

Как вернуться в предыдущее активное меню навигационного меню или любого Div, когда я нажимаю кнопку «Назад» в браузере в ReactJS?

0 голосов
/ 24 сентября 2019

Предполагается, что у меня есть четыре компонента;Дом, О, Блог и Контакты.В меню навигации элемент home или className элемента устанавливается в активное состояние.Кроме того, в Home Component некоторые classNames установлены в активное состояние.После выбора трех других элементов в меню навигации (О, Блог, Контакт) эти элементы также становятся активными.Моя проблема заключается в том, что каждый раз, когда я нажимаю кнопку «Назад» браузера, компоненты также возвращаются к своим, тогда как активный элемент навигации остается прежним.Как я могу сделать элементы навигации активными на основе текущего активного компонента?

Это мое меню навигации: 

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

Это Main: 

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

Я надеюсь, что кто-нибудь поможет.Спасибо.

...