Question

我正在React中重建我的投资组合，并且在从语义UI设置我正在使用的菜单时，我注意到第一个菜单项始终处于活动状态。我对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>

SemanticUI菜单-第一项始终处于活动状态

1 个答案: