在 React-Router Bootstrap Navbar 中设置为活动的父链接

Question

我的 Bootstrap 导航栏工作正常。当我单击 MenuItem 时，它被设置为“活动”。但我希望这样，例如，当我转到主页 > 状态 > 新状态时，MenuItem Home 将“活动”。我的 Bootstrap Navbar 包含以下代码：

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

还有一个 Menu-Wrapper，它可以让被点击的 MenuItem 设置为活动状态：

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

关于我的菜单，如果我在'/alumno/inicio/OTHER-ROUTE'，我希望'Inicio' 是'active'。有人知道我该怎么做吗？ （在我的 NavBar 中定义的父 MenuItem，在这种情况下，'Inicio'- 路由 - 在这种情况下 '/alumno/inicio/OTHER-ROUTE' 其中 'OTHER-ROUTE' 未在我的 NavBar 上定义 - 设置为活动）非常感谢。

Answer 1

好的，您有两种方法可以做到这一点。一种是您可以使用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 Bootstrap - https://react-bootstrap.github.io/

您可以将activeClassName 和activeStyle 属性放在链接上，它们将根据您是否在该路径（或子路径）上而处于活动状态。

Answer 2

这是错误：

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 在：const { router, index, to, matchPattern, children, ...props } = this.props;