<NavLink> активное состояние не работает с кнопкой браузера назад в React - PullRequest
Новая
       12

<NavLink> активное состояние не работает с кнопкой браузера назад в React

0 голосов
/ 12 июня 2018

У меня есть навигация, которая использует избыточность для события переключения, но все работает, как и ожидалось, у нее есть активный класс, когда маршрут правильный, кроме тех случаев, когда я нажимаю кнопку "Назад" в браузере.Когда я нажимаю кнопку «Назад», страница отображается правильно, за исключением активного состояния NavLink. 

import React, { Component } from 'react';
import { connect } from 'react-redux';

import { NavLink, withRouter } from 'react-router-dom';


import classes from './NavigationItem.css';

import * as actionTypes from '../../../../store/actions';

class navigationItem extends Component {

    constructor(props) {
        super(props);
        console.log('[NavigationItem.js] Inside constructor', props);
    }

    toggleNav(event) {

        this.props.openNavigation();
    }


    render() {
        return (
            <li className={classes.NavigationItem} onClick={ () => this.toggleNav() }>
                <NavLink 
                    to={this.props.link}
                    exact={this.props.exact}
                    activeClassName={classes.active}>{this.props.children}
                </NavLink>
            </li>
        )
    }
};

const mapStateToProps = state => {
    return {
        state: state.isOpened
    }
};

const mapDispatchToProps = dispatch => {
    return {
        openNavigation: (mapStateToProps, mapDispatchToProps) => dispatch({type: actionTypes.OPEN_NAVIGATION})
    }
};

const connectOptions = {
    pure: false
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps, null, connectOptions)(navigationItem));

1 Ответ

0 голосов
/ 12 июня 2018

В моем индексе, где я упаковывал компонент приложения, я импортировал BrowserRouter, но я должен был импортировать его как BrowserRouter as Router, Route.В этом вся разница.

...