Реализация реакции-маршрутизатора NavLink в реакции-начальной загрузки и включение свойства onSelect - PullRequest
Новая
       49

Реализация реакции-маршрутизатора NavLink в реакции-начальной загрузки и включение свойства onSelect

0 голосов
/ 26 марта 2019

Я пытаюсь создать отзывчивую навигационную панель, использующую реагирующую загрузку и навигационную ссылку реагирующего маршрутизатора.Я хочу реализовать NavLink, чтобы использовать реагирующий маршрутизатор для перехода к страницам, а также использовать его свойство activeClassName.

Метод : добавлено onToggle и расширенные свойства для Navbar (реакции-начальной загрузки).Добавлен обработчик onClick, который изменяет состояние реакции на NavLink (react-router-dom).Я сделал это для того, чтобы воссоздать свойство onSelect Navbar, которое не работает с NavLink.

Проблема : После открытия раскрывающегося меню я не могу закрыть его, если толькоЯ нажимаю на ссылку.Кнопка выключения гамбургера перестает отвечать на запросы, когда меню выпадает.

class MainNav extends Component{
    state= {
        navExpanded: false
    }

    setNavExpanded = () =>{
        this.setState({
            navExpanded:true
        })
    }

    setNavClosed = () => {
        this.setState({
            navExpanded:false
        })
    }
    render(){
        return(
            <div className="navdiv" >
                <Navbar 
                expand="md"
                onToggle={this.setNavExpanded}
                expanded={this.state.navExpanded}
                >
                    {
                        this.props.location.pathname!=="/" ? (<Link to="/">BRAND</Link>): (<Link to="/" className="disabled-link">BRAND</Link>)
                    }
                    <Navbar.Toggle  aria-controls="basic-navbar-nav"/>
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="ml-auto">
                            <NavLink onClick={this.setNavClosed} className="nav-link" activeClassName="selected" exact to="/">Home</NavLink>
                            <NavLink onClick={this.setNavClosed} className="nav-link" activeClassName="selected" to="/workshops">WorkShops</NavLink>
                            <NavLink onClick={this.setNavClosed} className="nav-link" activeClassName="selected" to="/products">Products</NavLink>
                            <NavLink onClick={this.setNavClosed} className="nav-link" activeClassName="selected" to="/about">About</NavLink>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>       
            </div>
        )

    }
}
export default MainNav
...