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

Question

I have created a navigation bar using react-boostrap library and I have used NavLink from react-router-dom library for nav items. But activeClassName prop of NavLink is not working for me. It doesn't append to the active class automatically. I have used activeStyle prop also. It does not work. Below is my code.

// 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;

Thanks in advance. :)

Answer 1

It is because you need to wrap the connect call with withRouter . To do that;

npm install compose

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

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

Or you can do it without compose library, but compose library makes the code a little bit more readable as more Higher Order Components come into the component

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

You can look at the official docs here for why you need to do such a thing