React-Router Bootstrap Navbarで親リンクとしてアクティブに設定してください

Question

Bootstrap Navbarが正常に動作しています。 MenuItemをクリックすると、「アクティブ」として設定されます。しかし、私はこれを望んでいます。たとえば、「ホーム>ステータス> NewStatus」に行くと、MenuItemホームが「アクティブ」になります。私はこのコードで私のブートストラップナビゲーションバーを持っている：

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

とメニュー・ラッパーアクティブの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

あなたには2つの方法があります。 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は2番目の/のようになるように条件を設定する必要があります。 activeClassNameとあなたがリンクの上に置くことができ、彼らはあなたがそのパス上にあるかどうかに応じてアクティブになりますactiveStyle小道具（またはサブパスがありhttps://react-bootstrap.github.io/

-

もっと良い方法がちょうどブートストラップを反応させるのに使用することです）。

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;