Меню SemanticUI - первый пункт всегда активен

Question

Я перестраиваю свое портфолио в React, и при настройке меню, которое я использую из семантического интерфейса, я замечаю, что первый пункт меню всегда активен.Я довольно новичок в React, и это мой первый проект на том же.

Итак, вот мой Index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.querySelector("#root"));

Вот мой App.js

import "./main.css";
import React from "react";
import { Route, NavLink, BrowserRouter as HashRouter } from "react-router-dom";
import home from "./home";
import about from "./about";
import portfolio from "./portfolio";
import resume from "./resume";
import contactMe from "./contactMe";

class mainContent extends React.Component {
  render() {
    return (
      <HashRouter>
        <div className="main-content">
          <div className="ui five item menu">
            <NavLink to="/" className="item">
              Home
            </NavLink>
            <NavLink to="/about" className="item">
              About
            </NavLink>
            <NavLink to="/portfolio" className="item">
              Portfolio
            </NavLink>
            <NavLink to="/resume" className="item">
              Resume
            </NavLink>
            <NavLink to="/contactMe" className="item">
              Contact Me
            </NavLink>
          </div>

          <div className="content">
            <Route exact path="/" component={home} />
            <Route path="/about" component={about} />
            <Route path="/portfolio" component={portfolio} />
            <Route path="/resume" component={resume} />
            <Route path="/contactMe" component={contactMe} />
          </div>
          <div className="footer">
            <footer className="fixed">
              &copy; Credits
            </footer>
          </div>
        </div>
      </HashRouter>
    );
  }
}

export default mainContent;

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

Вот изображение, к которому вы можете обратиться -

Как я могу решить эту проблему?так что только текущая ссылка отображается как активная.Ценю вашу помощь и обратную связь.

Спасибо.

Answer 1

Вы также можете использовать опору exact для компонентов NavLink.Корневой маршрут / всегда будет совпадать, потому что это корневой маршрут.

Это то, что вам нужно добавить

<NavLink to="/" className="item" exact>Home</NavLink>