活動類在react-router-dom庫的NavLink中不起作用

Question

我已經使用react-boostrap庫創建了導航欄，並使用NavLink來自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));

您可以在這里查看官方文檔 ，了解為什么需要這樣做