javascript - react 路由器索引路由始终处于事件状态

Question

我正在尝试使用 react activeClassName 属性来设置导航样式。到目前为止它按预期工作，但有一个问题 - 我的第一个导航链接指向根路径 (/)。因此，即使在另一个 URL 上，它也会将该 URL(例如/skills)和根注册为事件的(因此 2 个菜单项得到样式化)。

有没有简单的解决方法？我是否应该将 Root 路由定义为其他内容(例如/home)？

我的标题:

import React, { PropTypes } from 'react';
import { Link, IndexLink } from 'react-router';

const Header = () => {
    return (
        <div className="header">
            <div className="headerImage"></div>
            <ul className="headerNav">
                <li className="headerNavLink"><Link to="/" activeClassName="activeLink">introduction</Link></li>
                <li className="headerNavLink"><Link to="/skills" activeClassName="activeLink">skills</Link></li>
                <li className="headerNavLink"><Link to="/portfolio" activeClassName="activeLink">portfolio</Link></li>
            </ul>
        </div>
    );
};

export default Header;

路由.js:

import React from 'react';
import { Route, IndexRoute } from 'react-router';
//Import app
import App from './components/App';
//Import pages
import IntroductionPage from './components/introduction/IntroductionPage';
import SkillsPage from './components/skills/SkillsPage';
import PortfolioPage from './components/portfolio/PortfolioPage';

//Define routes
export default (
    <Route path="/" component={App}>
        <IndexRoute component={IntroductionPage} />
        <Route path="skills" component={SkillsPage} />
        <Route path="portfolio" component={PortfolioPage} />
    </Route>
);

所以澄清一下，我希望我的家乡路线在另一条路线上时不活动。

我做错了什么？

谢谢

Answer 1

我想 reference the docs for React Router (react-router-dom，当前为 v5)和 sources . 这是最新的实现方法:

exact: bool

When true, the active class/style will only be applied if the location is matched exactly.

<NavLink exact to="/profile">
  Profile
</NavLink>

这是一个真实世界的工作示例:

<ul class="nav flex-column">
    <li class="nav-item">
      <NavLink className="nav-link" activeClassName="active" to="/" exact>Home</NavLink>
    </li>
    <li class="nav-item">
      <NavLink className="nav-link" activeClassName="active" to="/calendar">Calendar</NavLink>
    </li>
    <li class="nav-item">
      <NavLink className="nav-link" activeClassName="active" to="/page">Page</NavLink>
    </li>
</ul>