Bootstrap NavBar 不设置 li class="active" 与 React-Router。响应式JS

Question

我有一个名为 MenuAlumno 的 React 组件，它是一个 Bootstrap 导航栏。我使用 ES6 - ReactJS - React-Router。

这是我的组件：

render() {
    return (
        <nav class="navbar navbar-default">

            <div class="navbar-header">
              <button type="button" class="navbar-toggle navbar-collapse-left" data-toggle="collapse" data-target="#idNavBarCollapsed" aria-expanded="false">
                <span class="sr-only">Menú</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand visible-xs-block" /*href="http://www.upct.es/"*/><span id="idTextoLogotipo">- INCIDENCIAS -</span></a>
            </div>

            <div id="idNavBarCollapsed" class="collapse navbar-collapse">
              <ul class="nav navbar-nav navbar-left">
                    <li><Link to='/administrador/inicio'>Inicio</Link></li>
                    <li><Link to='/administrador/nueva_incidencia'>Nueva Incidencia</Link></li>
                    <li><Link to='/administrador/incidencias_recibidas'>Incidencias Recibidas</Link></li>
                    <li><Link to='/administrador/informes'>Informes</Link></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li class="divider visible-xs-block"></li>
                    <p class="navbar-text navbar-text-center hidden-xs"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre} ({this.state.dni})</p>
                    <p class="navbar-text navbar-text-center visible-xs-block"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre}</p>
                    <li class="navbar-text-center"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-off"></span> Salir</a></li>
                </ul>
            </div>

        </nav>
    );
}

但是当我点击 <li> 时，它没有设置为活动状态。我该如何解决这个问题？我已经尝试了很多不同的东西，但我还没有实现....

此外，我希望如果我在导航栏上未定义的路线上（例如：/administrador/inicio/hi/How_are_you/Fine），则相应的 <li> 将设置为活动状态（在此示例中：/administrador/inicio) 但如果我有另一个元素（在 NavBar 上定义）为： /administrador/inicio/hi 这不是活动的（我通过 window.location.pathname.include ('/administrador/inicio') -这将激活两个链接-)。仅激活父 <li>（<li> 使我进入那个 url），而不是 'possible parents'.

此外，我希望当我单击 F5 时，它会继续处于活动状态。

在这个项目中我不能使用React-Bootstrap，所以这个选项是不可能的。

我想了很久想解决这个问题，但还是没搞定。欢迎任何帮助。

谢谢大家

Answer 1

我以前运行遇到过这个问题。你应该注意一些关于'this props'的路线，你可以发现路线发生了变化，然后你通过这个变化来做一些事情。

Answer 2

可能您正在寻找这个

var selector = '.nav li';

$(selector).on('click', function(){
    $(selector).removeClass('active');
    $(this).addClass('active');
});

li.active {
    color: Red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
    <li style="cursor:pointer">Inicio</li>
    <li style="cursor:pointer">Nueva Incidencia</li>
    <li style="cursor:pointer">Incidencias Recibidas</li>
    <li style="cursor:pointer"> Informes</li>
</ul>

Answer 3

已解决：

render() {
    return (
        <nav class="navbar navbar-default">

            <div class="navbar-header">
              <button type="button" class="navbar-toggle navbar-collapse-left" data-toggle="collapse" data-target="#idNavBarCollapsed" aria-expanded="false">
                <span class="sr-only">Menú</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand visible-xs-block" /*href="http://www.upct.es/"*/><span id="idTextoLogotipo">- INCIDENCIAS -</span></a>
            </div>

            <div id="idNavBarCollapsed" class="collapse navbar-collapse">
              <ul class="nav navbar-nav navbar-left">
                    <li><NavLink to='/administrador/inicio'>Inicio</NavLink></li>
                    <li><NavLink to='/administrador/nueva_incidencia'>Nueva Incidencia</NavLink></li>
                    <li><NavLink to='/administrador/incidencias_recibidas'>Incidencias Recibidas</NavLink></li>
                    <li><NavLink to='/administrador/informes'>Informes</NavLink></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li class="divider visible-xs-block"></li>
                    <p class="navbar-text navbar-text-center hidden-xs"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre} ({this.state.dni})</p>
                    <p class="navbar-text navbar-text-center visible-xs-block"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre}</p>
                    <li class="navbar-text-center"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-off"></span> Salir</a></li>
                </ul>
            </div>

        </nav>
    );
}

Bootstrap NavBar 不设置 li class="active" 与 React-Router。响应式JS

Bootstrap NavBar do not set up li class="active" with React-Router. ReactJS

navbar

twitter-bootstrap

ecmascript-6

reactjs

react-router