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

Question

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

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

这是我的代码：

应用程序.jsx：

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

导航栏.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

导航.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，因为它们没有被路由到任何其他组件。

但是当我单击Submit Form哪个路由到SomeForm组件时，突出显示返回到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

标签： reactjsbootstrap-4react-routerreact-bootstrap

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与 React结合使用

这是codeSandbox上的一个实时示例