使用反应在引导程序中突出显示当前页面

Question

我已经看到了多个与此相关的问题，并且我都尝试了所有这些问题，但没有任何结果。因此，发布另一个看似重复的问题。

我试图在导航栏中突出显示当前页面按钮。对于简单的示例，我没有将其路由到新页面，它可以工作。但是当我将它路由到不同的页面（一个单独的反应组件）时，它就不起作用了。

这是我的代码：

App.jsx：

class App extends Component {
  render() {
    return (
        <BrowserRouter>
            <div>
                <Route exact={true} path='/' component={HomeApp}/>
                <Route path='/form' component={SomeForm}/>
            </div>
        </BrowserRouter>
    );
  }
}

NavigationBar.jsx

class NavigationBar extends Component {

    componentDidMount() {
        toggleIcon();
    }

    render() {
        return (<div id="topheader">
        <nav className="navbar navbar-expand-lg navbar-light bg-light ">

            <a className="navbar-brand" href="#">Whatever</a>

            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>

            <div className="collapse navbar-collapse" id="navbarNav">
                <ul className="navbar-nav nav nav-pills ml-auto">
                    <li className="nav-item active">
                        <a className="nav-link" href="/">Home <span className="sr-only">(current)</span></a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="/form">Submit Form</a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="#">Sign Up</a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link " href="#">Login</a>
                    </li>
                </ul>
            </div>
        </nav>
            </div>
        )
    }
}

export default NavigationBar

navigation.js

import $ from 'jquery';

export function toggleIcon() {
    $( '#topheader .navbar-nav a' ).on( 'click', function () {
        $( '#topheader .navbar-nav' ).find( 'li.active' ).removeClass( 'active' );
        $( this ).parent( 'li' ).addClass( 'active' );
    });
}

正如所见，当我单击 Sign Up 或 Login 时突出显示有效，因为它们没有被路由到任何其他组件。

但是当我点击路由到SomeForm 组件的Submit Form 时，突出显示又回到Home 按钮。

更多详情，我贴出HomeApp和SomeForm组件的内容：

HomeApp.jsx

class HomeApp extends Component {
    render() {
        return (
            <div className="container">
                <NavigationBar/>
                <Jumbotron/>
            </div>
        )
    }
}

export default HomeApp

SomeForm.jsx

class SomeForm extends Component {
    render() {
        return (<>
                <div className="container">
                    <NavigationBar>
                    </NavigationBar>
                </div>
            </>
        )
    }
}

export default SomeForm

Answer 1

请遵循这个结构：

import { BrowserRouter, Switch, Route } from "react-router-dom"

class App extends React.Component{
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Navigation />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/about" component={About} />
            <Route exact path="/contact" component={MoreRoutes} />
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
}

并且您需要使用@Mikail Bayram 提到的NavLink，这将允许您也使用activeClassName，您的每条路线都需要exact 属性，以便仅在路径有时才渲染路线完全匹配。请注意，您可以随意调用active 类。

您的导航应如下所示：

import { NavLink } from "react-router-dom"

const Navigation = () => (
  <nav>
    <ul>
      <li>
        <NavLink exact activeClassName="active" to="/">
          Home
        </NavLink>
      </li>
      <li>
        <NavLink exact activeClassName="active" to="/about">
          About
        </NavLink>
      </li>
      <li>
        <NavLink exact activeClassName="active" to="/contact">
          Contact
        </NavLink>
      </li>
    </ul>
  </nav>
)

附带说明：您应该切勿结合jQuery with React

这是codeSandbox的一个活生生的例子

Answer 2

由于您需要突出显示链接 (li) 的父元素，您可以在 NavigationBar 的 react-router 中使用 withRouter（或功能组件的 useLocation 钩子）和 NavLink：

import React, { Component } from 'react';
import { withRouter } from 'react-router';

class NavigationBar extends Component {

    constructor(props) {
        super(props);
        this.renderMenuLink = this.renderMenuLink.bind(this);
    }

    componentDidMount() {
        toggleIcon();
    }

    renderMenuLink({ path, label }) {
        const { location } = this.props;
        const isActive = location.pathname === path;
        return (
            <li key={path} className={`nav-item ${isActive ? 'active' : ''}`}>
                <NavLink className="nav-link" to={path}>
                     {label}{isActive ? <span className="sr-only">(current)</span> : ''}
                </NavLink>
            </li>
        );
    }

    render() {
        const menuLinks = [
            { path: '/', label: 'Home' },
            { path: '/form', label: 'Submit Form' },
            { path: '/register', label: 'Sign Up' },
            { path: '/login', label: 'Login' },
        ];
        return (<div id="topheader">
        <nav className="navbar navbar-expand-lg navbar-light bg-light ">

            <a className="navbar-brand" href="#">Whatever</a>

            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>

            <div className="collapse navbar-collapse" id="navbarNav">
                <ul className="navbar-nav nav nav-pills ml-auto">
                    {menuLinks.map((menuLink) => this.renderMenuLink(menuLink))}
                </ul>
            </div>
        </nav>
            </div>
        )
    }
}

export default withRouter(NavigationBar);