Reactjs 在React路由器引导导航栏中将父链接设置为活动链接

我有一个引导导航条工作正常。当我点击菜单项时，它被设置为“活动”。但我希望，例如，当我进入主页>状态>新闻状态时，菜单项主页将“激活”。我的引导导航栏有以下代码：

import React from 'react';

import MenuNavItem from './MenuNavItem.jsx'

export default class Menu extends React.Component {
constructor() {
    super();
}

render() {
    return (
        <nav id="idNavMenu" class="navbar navbar-default" role="navigation">

            {/*<a class="navbar-brand" href="/inicio"><img id="idFotoLogotipo" width="200px" src="./assets/images/cabecera_CE.jpg"/></a>*/}

            <a class="navbar-brand" href="http://www.upct.es/"><span id="idTextoLogotipo">UPCT</span></a>

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Menú</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <MenuNavItem to='/alumno/inicio' index={true}>Inicio</MenuNavItem>
                    <MenuNavItem to='/alumno/nueva_incidencia'>Nueva Incidencia</MenuNavItem>
                    <MenuNavItem to='/alumno/mis_incidencias'>Mis Incidencias</MenuNavItem>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <MenuNavItem to=''><span class="glyphicon glyphicon-off"></span> Salir</MenuNavItem>
                </ul>
            </div>

        </nav>
    );
}
}

从“React”导入React；
从“/MenuNavItem.jsx”导入MenuNavItem
导出默认类菜单扩展了React.Component{
构造函数（）{
超级（）；
}
render（）{
返回(
{/**/}
门努

伊尼西奥
新发病率
误发


萨利尔

);
}
}

以及一个菜单包装器，用于将单击的菜单项设置为活动：

import React from 'react'
import { Link, IndexLink, withRouter } from 'react-router'


export default class NavItem extends React.Component {
constructor() {
    super();
}

render() {
    const { router, index, to, children, ...props } = this.props;
    let isActive = false;

    if (router.isActive('./', true) && index) {
        isActive = true
    } else {
        isActive = router.isActive(to)
    } 

    const LinkComponent = index ?  IndexLink : Link

    return (
        <li className={isActive ? 'active' : ''}>
            <LinkComponent to={to} {...props}>{children}</LinkComponent>
        </li>
    );
}
}

NavItem = withRouter(NavItem);

从“React”导入React
从“react router”导入{Link，IndexLink，withRouter}
导出默认类NavItem扩展React.Component{
构造函数（）{
超级（）；
}
render（）{
const{router，index，to，children，…props}=this.props；
让i主动=假；
if（router.isActive（'./'，true）&索引）{
isActive=true
}否则{
isActive=路由器。isActive（到）
} 
常量链接组件=索引？索引链接：链接
返回(

{儿童}

);
}
}
NavItem=带路由器（NavItem）；

---

关于我的菜单，如果我在

'/alumno/inicio/OTHER-ROUTE'

我希望

'inicio'

会是

'active'

。有人知道我怎么做？（在我的导航栏中定义的父菜单项，在本例中是路线的

'Inicio'

，在本例中是

'/alumno/Inicio/OTHER-route'

，该

'OTHER-route'

未在我的导航栏中定义-设置为活动）非常感谢。

好的，有两种方法可以做到这一点。一种是可以使用

window.location.pathname

返回当前路径作为检查。因此，如果您在

/alumno/inicio/OTHER-ROUTE

上，则

window.location.pathname

将返回

/alumno/inicio/OTHER-ROUTE

。如果您在

/alumno/inicio

上，则

window.location.pathname

将返回

/alumno/inicio

。因此，您可以分析

window.location.pathname

并查看

inicio

是否存在，然后相应地设置为活动。要匹配的字符串可以作为

prop

传递

大概是

if(window.location.pathname.includes(this.props.matchPattern)){
        isActive = true
}

但这并不“计算正确”，因为您必须进行更改以确保匹配正确。因此，如果存在类似于

/alumno/falumno/inicio

的路径，它将返回true，因此您必须设置条件，使

inicio

仅位于第二个

/

之后，依此类推

更好的方法是使用React引导-

您可以在链接上放置

activeClassName

和

activeStyle

道具，这些道具将根据您是否在该路径（或子路径）上而处于活动状态。

这是错误：

Warning: Unknown prop `matchPattern` on <a> tag. Remove this prop from the element. For details, see URL-OF-REACT
in a (created by Link)
in Link (created by IndexLink)
in IndexLink (created by NavItem)
in li (created by NavItem)
in NavItem (created by withRouter(NavItem))
in withRouter(NavItem) (created by Menu)
in ul (created by Menu)
in div (created by Menu)
in nav (created by Menu)
in Menu (created by TablaMisIncidencias)
in div (created by TablaMisIncidencias)
in TablaMisIncidencias (created by RouterContext)
in RouterContext (created by Router)
in Router (created by Routes)
in Routes

警告：标签上的'matchPattern'属性未知。从元件上拆下此道具。有关详细信息，请参阅URL-OF-REACT
在中（由链接创建）
in链接（由IndexLink创建）
在IndexLink中（由NavItem创建）
在li中（由NavItem创建）
在NavItem中（由withRouter（NavItem）创建）
在withRouter（NavItem）中（通过菜单创建）
在ul中（通过菜单创建）
在div中（通过菜单创建）
导航中（通过菜单创建）
在菜单中（由TablaMisIncidencias创建）
在div中（由TablaMisIncidencias创建）
在TablaMisIncidencias中（由RouterContext创建）
路由器上下文中（由路由器创建）
路由器中（由路由创建）
沿途

-------编辑（已解决）：

---

我在：

const{router，index，to，matchPattern，children，…props}=this.props中添加matchPattern解决了这个问题
非常感谢！它在工作！。当我有更多的时间时，我会按照你的建议尝试React Bootstrap。谢谢。你好，@minalmech先生。今天我犯了这个错误。可能是什么？（我将在aswer中发布它，因为我不能将它粘贴在这里，太长了。谢谢。嗨，@minalmech先生，你能读一下这个吗？请帮我一下吗？嗨@minalmech先生。很抱歉给你添了这么多麻烦，但是…你能过来看看吗？