Question

我有一个导航器，它使用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));

Answer 1

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

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

1 个答案: