活动类在 react-router-dom 库的 NavLink 中不起作用

Question

我已经使用react-boostrap 库创建了一个导航栏，并且我使用了来自react-router-dom 库的NavLink 导航项。但是activeClassName 的NavLink 属性对我不起作用。它不会自动附加到活动类。我也使用了activeStyle 道具。这是行不通的。下面是我的代码。

// NavigationBar.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import { Navbar, NavDropdown } from 'react-bootstrap';

import { logOutUser } from '../../actions/UserActions';
import NavBarItems from '../../components/NavbarItems/NavbarItems';

class NavBar extends Component {
    state = {
        isLogOut: false
    }

    componentDidUpdate(prevProps) {
        if (prevProps.user.logout !== this.props.user.logout) {
            this.setState({isLogOut: true});
        }
    }

    handleSingnOutOnclick = () => {
        this.props.dispatch(logOutUser());
    }

    render() {
        let loggedUser = localStorage.getItem('userName');

        return(
            <div>
                {
                    this.state.isLogOut ?
                        <Redirect to="/login" /> :
                        <div className="main-navbar">
                            <Navbar className="navbar-height">
                                <Navbar.Collapse id="basic-navbar-nav">
                                    <NavBarItems />
                                </Navbar.Collapse>
                                <NavDropdown
                                    title={loggedUser}
                                    id="basic-nav-dropdown"
                                    className="nav-anchor nav-dropdown"
                                >
                                    <NavDropdown.Item>Profile</NavDropdown.Item>
                                    <NavDropdown.Item onClick={() => this.handleSingnOutOnclick()}>
                                        Log Out
                                    </NavDropdown.Item>
                                </NavDropdown>
                            </Navbar>
                            <div className="navbar-bottom-line"></div>
                        </div>
                }
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        user: state.user
    }
}

export default connect(mapStateToProps)(NavBar);



// NavbarItems.js
import React, { Component } from 'react';
import { Nav } from 'react-bootstrap';

import config from '../../config/config';
import MainNavItem from '../NavItem/MainNavItem';

class NavBarItems extends Component {
    getNavItems = () => {
        const navItems = config.navItems;

        return navItems.map((item, i) => {
            return (
                <MainNavItem
                    key={i}
                    currentIndex={i}
                    item={item}
                />
            );
        });
    }

    render() {
        return (
            <Nav className="mr-auto">
                {this.getNavItems()}
            </Nav>
        );
    }
}

export default NavBarItems;



// MainNavItem.js
import React from 'react';
import { NavLink } from 'react-router-dom';

const MainNavItem = (props) => {
    const {
        item,
    } = props;

    return (
        <NavLink
            exact
            to={item.link}
            activeClassName="active-item"
            className="nav-anchor"
        >
            <li key={item.link} >
                <span>{item.text}</span>
            </li>
        </NavLink>
    );
}

export default MainNavItem;

提前致谢。 :)

Answer 1

这是因为您需要用withRouter 包装connect 调用。为此；

npm install compose

import { withRouter } from "react-router-dom";
import compose from "compose";

export default compose(
  withRouter,
  connect(mapStateToProps, mapDispatchToProps)
)(NavBar);

或者你可以不使用 compose 库，但是 compose 库使代码更具可读性，因为更多的高阶组件进入组件

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(NavBar));

你可以在这里查看official docs，了解为什么你需要做这样的事情