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

Question

我有一个Bootstrap Navbar工作正常。当我点击一个MenuItem时，它被设置为'active'。但是我想要的是，例如，当我进入主页>状态> NewStatus时，MenuItem Home将'激活'。我有我的引导导航栏使用此代码：

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

和菜单式包装，它可以让设置为活动的菜单项点击：

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等等。

的更好的方法是只使用阵营引导 - 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 

------- EDIT（解决）：

我解决了它在添加matchPattern：const { router, index, to, matchPattern, children, ...props } = this.props;