Navlink от react-router-dom Home всегда активен

Навигация работает, домашняя ссылка всегда активна, остальные ссылки в порядке. Добавление как компонент, без реквизита.

HTML

 <Menu/>

CSS

.active{
background-color:#ff6a00;
}

JS

import React, { Component } from 'react';
import './menu.css';
import { NavLink } from 'react-router-dom'
export default class TopMenu extends Component {

 render() {
    return (
        <div className="ui container">
            <div className="ui stackable menu">
                <div className="item">
                    <NavLink to='/' >
                        <i aria-hidden="true" className="home  icon" ></i>
                        Home
                     </NavLink>
                </div>
                <div className="item">
                    <NavLink to='/about' >
                        <i aria-hidden="true" className="circle info  icon" > 
                        </i>
                        About
                    </NavLink>
                </div>

                <div className="item" >
                    <NavLink to='/Settings'>
                        <i aria-hidden="true" className="cogs icon red" ></i>
                        Settings
                    </NavLink>
                </div>
            </div>
        </div>
     );
   }
 }

Идеи кто-нибудь, почему дом всегда активен?


person saj    schedule 06.07.2018    source источник


Ответы (1)


вы должны указать точную опору для вашего домашнего маршрута '/', потому что это соответствует всем другим маршрутам, поэтому '/' всегда активен.

 <NavLink to='/' exact={true}>
   <i aria-hidden="true" className="home  icon" ></i>
   Home
 </NavLink>
person AngelSalazar    schedule 06.07.2018
comment
Это действительно помогает. Большое спасибо :) - person Imran Rafiq Rather; 13.11.2020