Reactjs 使用react突出显示引导中的当前页面

我见过许多与此相关的问题，我都试过了，没有结果。因此，发布了另一个看似重复的问题

我试图突出显示导航栏中的“当前页面”按钮。举个简单的例子，如果我没有将它发送到新页面，它就可以工作了。但是当我将它路由到另一个页面（一个单独的react组件）时，它就不起作用了

以下是我的代码：

App.jsx：

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

如图所示，当我单击

注册

或

登录

时，高亮显示会起作用，因为它们不会被路由到任何其他组件

但是当我点击

submitform

时，它被路由到

SomeForm

组件，突出显示返回到

Home

按钮

有关更多详细信息，我将发布

HomeApp

和

SomeForm

组件的内容：

HomeApp.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

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

export default HomeApp

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

export default SomeForm

类HomeApp扩展组件{
render（）{
返回(
)
}
}
导出默认HomeApp

SomeForm.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

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

export default HomeApp

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

export default SomeForm

类SomeForm扩展组件{
render（）{
返回(
)
}
}
导出默认格式

请遵循以下结构：

从“react router dom”导入{BrowserRouter，Switch，Route}

const导航=（）=>(


家


关于


接触


)

作为旁注：你应该永远不要组合

---

以下是一个现场示例，请遵循以下结构：

从“react router dom”导入{BrowserRouter，Switch，Route}

const导航=（）=>(


家


关于


接触


)

作为旁注：你应该永远不要组合

---

以下是一个位于

的实时示例，因为您需要突出显示链接（li）的父元素，您可以使用（或钩住功能组件）导航栏中的react router：

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

import React，{Component}来自'React'；
从“react router”导入{withRouter}；
类导航栏扩展组件{
建造师（道具）{
超级（道具）；
this.renderMenuLink=this.renderMenuLink.bind（this）；
}
componentDidMount（）{
切换图标（）；
}
RenderNulink（{path，label}）{
const{location}=this.props；
const isActive=location.pathname==path；
返回(

{label}{isActive？（当前）：''}

);
}
render（）{
常数menuLinks=[
{path:'/'，标签：'Home'}，
{路径：'/form'，标签：'提交表单'}，
{路径：'/register'，标签：'注册'}，
{路径：'/login'，标签：'login'}，
];
返回(

{menuLinks.map（（menuLink）=>this.rendermanulink（menuLink））}

)
}
}
使用路由器导出默认值（导航栏）；

由于需要突出显示链接（li）的父元素，您可以使用（或功能组件的挂钩）导航栏中的react router：

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

import React，{Component}来自'React'；
从“react router”导入{withRouter}；
类导航栏扩展组件{
建造师（道具）{
超级（道具）；
this.renderMenuLink=this.renderMenuLink.bind（this）；
}
componentDidMount（）{
切换图标（）；
}
RenderNulink（{path，label}）{
const{location}=this.props；
const isActive=location.pathname==path；
返回(

{label}{isActive？（当前）：''}

);
}
render（）{
常数menuLinks=[
{path:'/'，标签：'Home'}，
{路径：'/form'，标签：'提交表单'}，
{路径：'/register'，标签：'注册'}，
{路径：'/login'，标签：'login'}，
];
返回(

{menuLinks.map（（menuLink）=>this.rendermanulink（menuLink））}

)
}
}
使用路由器导出默认值（导航栏）；

既然您使用的是react路由器，为什么不使用组件而不是。您还可以查看以下文档：既然您使用的是react router，为什么不使用组件来代替它呢。您还可以查看以下文档：实际上，在本例中，甚至可以代替NavLink，因为您不想格式化活动元素本身。实际上，在本例中，甚至可以代替NavLink，因为您不想格式化活动元素本身