Einrichten als aktiver Eltern-Link in React-Router Bootstrap Navbar

Question

Ich habe ein Bootstrap Navbar funktioniert gut. Wenn ich auf ein MenuItem klicke, wird es als 'aktiv' eingerichtet. Aber ich möchte, dass zum Beispiel, wenn ich auf Home> Status> NewStatus gehe, das MenuItem Home "aktiv" wäre. Ich habe meine Bootstrap Navbar mit diesem Code:

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

und einem Menü-Wrapper, die als aktiver die MenuItem geklickt Set kann:

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

In Bezug auf mein Menü, wenn ich bei '/alumno/inicio/OTHER-ROUTE' bin ich mag dass 'Inicio' wäre 'active'. Jemand weiß, wie könnte ich das tun? (das übergeordnete MenuItem - in meiner NavBar definiert, in diesem Fall 'Inicio' - einer Route - in diesem Fall '/alumno/inicio/OTHER-ROUTE' welches 'OTHER-ROUTE' ist nicht auf meiner NavBar definiert - als aktiv eingestellt) Vielen Dank.

Answer 1

Ok, Sie haben zwei Möglichkeiten, dies zu tun. Eine davon ist window.location.pathname, die den aktuellen Pfad als Kontrolle zurückgibt. Wenn Sie also auf /alumno/inicio/OTHER-ROUTE sind, wird window.location.pathname/alumno/inicio/OTHER-ROUTE zurückgeben. Wenn Sie sich auf /alumno/inicio befinden, wird window.location.pathname/alumno/inicio zurückgeben. So können Sie die window.location.pathname analysieren und sehen, ob inicio vorhanden ist und dann entsprechend als aktiv gesetzt. Die übereinstimmende Zeichenfolge kann als prop übergeben werden.

So etwas wie

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

Aber das ist nicht „rechnerisch richtig“, wie Sie die Spiele recht Änderungen müssen zu gewährleisten. Also, wenn es einen Pfad wie /alumno/falumno/inicio gibt, wird es wahr zurückgeben, so müssen Sie dann die Bedingung machen, dass inicio sollte nur nach dem zweiten / und so weiter und so fort kommen.

Die viel bessere Weg ist Bootstrap Reagieren nur zu benutzen - https://react-bootstrap.github.io/

Es ein activeClassName und activeStyle Requisiten ist, dass Sie auf die Links setzen können, und sie werden in Abhängigkeit von aktiv sein, ob Sie auf diesem Weg sind (oder subpath). Diese

Answer 2

ist der Fehler:

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 (GELÖST):

Ich löste es das Hinzufügen matchPattern in: const { router, index, to, matchPattern, children, ...props } = this.props;