在 React-Router Bootstrap Navbar 中将 parent-link 设置为活动

Question

我有一个 Bootstrap 导航栏工作正常。当我单击 MenuItem 时，它被设置为 'active'。但是我想要这样，例如，当我转到主页 > 状态 > NewStatus 时，MenuItem 主页将 'active'。我的 Bootstrap 导航栏带有此代码：

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'。有人知道我该怎么做吗？（父 MenuItem - 在我的 NavBar 中定义，在这种情况下，'Inicio'- 路线 - 在这种情况下 '/alumno/inicio/OTHER-ROUTE' 其中 'OTHER-ROUTE' 未在我的 NavBar 上定义 - 设置为活动）非常感谢。

Answer 1

好的，您有两种方法可以做到这一点。一个是您可以使用 window.location.pathname 其中 returns 当前路径作为检查。因此，如果您在 /alumno/inicio/OTHER-ROUTE 上，那么 window.location.pathname 将 return /alumno/inicio/OTHER-ROUTE。如果您在 /alumno/inicio，那么 window.location.pathname 将 return /alumno/inicio。所以你可以解析 window.location.pathname 并查看 inicio 是否存在，然后相应地设置为活动。要匹配的字符串可以作为 prop.

向下传递

所以像

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

但这不是 "computationally correct"，因为您必须进行更改以确保匹配正确。因此，如果有一条像 /alumno/falumno/inicio 这样的路径，它将 return 为真，因此您必须使条件使得 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;

在 React-Router Bootstrap Navbar 中将 parent-link 设置为活动

Set up as active a parent-link in React-Router Bootstrap Navbar

navbar

ecmascript-6

reactjs

twitter-bootstrap-3

react-router