<NavLink> 活动状态不适用于 React 中的后退浏览器按钮答案

【问题标题】：<NavLink> active state does not work with back browser button in React<NavLink> 活动状态不适用于 React 中的后退浏览器按钮
【发布时间】：2018-11-21 09:13:33
【问题描述】：

我有一个使用 redux 进行切换事件的导航，但是一切都按预期工作，当路由正确时它有一个活动类，除非我在浏览器中点击后退按钮。当我点击后退按钮时，页面会正确呈现，但 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));

【问题讨论】：

标签： javascript reactjs redux react-router-dom

【解决方案1】：

在包装 App 组件的索引中，我导入了 BrowserRouter，但我应该将其导入为 BrowserRouter as Router, Route。这一切都不同了。

【讨论】：