Question

我有一个Bootstrap Navbar工作正常。当我点击MenuItem时，它被设置为＆＃39; active＆＃39;。但我希望如此，例如，当我去Home＆gt;状态＆gt; NewStatus，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，它允许将ClickItem设置为活动状态：

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'我的NavBar上没有定义'OTHER-ROUTE' - 设置为活动状态）非常感谢你。

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
}

但这不是＆＃34;计算正确＆＃34;因为您必须进行更改以确保匹配正确。因此，如果存在类似/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

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

我在：const { router, index, to, matchPattern, children, ...props } = this.props;

中添加了matchPattern

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

2 个答案: