使用反应在引导程序中突出显示当前页面
Posted
技术标签:
【中文标题】使用反应在引导程序中突出显示当前页面【英文标题】：Highlight current page in bootstrap with react 【发布时间】：2020-05-02 16:49:09 【问题描述】：我已经看到了多个与此相关的问题，并且我都尝试了所有这些问题，但没有任何结果。因此，发布另一个看似重复的问题。
我试图在导航栏中突出显示当前页面按钮。对于简单的示例，我没有将其路由到新页面，它可以工作。但是当我将它路由到不同的页面（一个单独的反应组件）时，它就不起作用了。
这是我的代码：
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
【问题讨论】：
既然你用的是react-router，为什么不用请遵循这个结构：
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的一个活生生的例子
【讨论】：
【参考方案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>
labelisActive ? <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);
【讨论】：
实际上，在这种情况下，即使是Link 也可以代替 NavLink，因为您不希望对活动 元素本身进行格式化以上是关于使用反应在引导程序中突出显示当前页面的主要内容，如果未能解决你的问题，请参考以下文章