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