React-Router中的索引路由始终处于活动状态

Question

我试图使用React的activeClassName属性来为我的导航设置样式。目前它按预期工作，但是有一个问题 - 我的第一个导航链接指向根路由(/)。因此，即使在另一个URL上，它也会将该URL(例如/skills)和根标记为活动状态(因此2个菜单项都被样式化)。

是否有简单的解决方法？我应该将根路由定义为其他内容(例如/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;

路由文件：routes.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>
);

为了澄清，当我在另一个路线上时，我希望我的主页路线不处于活动状态。

我做错了什么？

谢谢

- Miha Šušteršič

Answer 1

我想要查看React Router文档（目前是v5的react-router-dom），还有源代码。 这是实现这个功能的最新方法：

exact: bool

当为true时，只有位置完全匹配时才会应用活动类/样式。

<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>

- sr9yar

---

接受此为正确答案，因为它提到了最新的解决方案。 - Miha Šušteršič

感谢您挽救了情况。 - KeshavDulal

Answer 2

如果您使用的是 "react-router-dom": "4.1.1"，我也想分享一下。

export const routes = <Index>
    <Route exact path='/' component={Home} />
    <Route path='/about' component={About} />
</Index>;

那么您的导航菜单是

<NavLink exact={true} activeClassName='active' to="/">
   Home
</NavLink>
<NavLink activeClassName='active' to="/bout">
    About
</NavLink>

只需为NavLink指定"exact={true}"属性，它应该按预期工作。

谢谢，希望这可以帮到你。

- jayson.centeno

---

谢谢，这很有帮助。我学到的是，在路由中使用'exact'属性可以在加载组件之前匹配路径，而在NavLink中使用'exact'属性可以在应用'active'类到<a>标签之前匹配路径。 - Akash Kumar Seth

Answer 3

这在v6中再次发生了变化。

属性exact已被替换为end。

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

这里是React Router Dom文档参考。

- manguy

Answer 4

你可以使用<IndexLink>或为不需要在其子路径处活动时被突出显示的链接设置onlyActiveOnIndex属性：

<li className="headerNavLink"><IndexLink to="/" activeClassName="activeLink">introduction</IndexLink></li>

或者

<li className="headerNavLink"><Link to="/" activeClassName="activeLink" onlyActiveOnIndex>introduction</Link></li>

- Pawel Zubrycki

---

对于那些使用 react-router-bootstrap 的人来说，相应的组件是 <IndexLinkContainer>。 - tropicalfish

Answer 5

在 react-router-dom ^4.0 中，没有 IndexRoute 或 IndexLink。相反，您需要将路由路径指定为 exact，并将子路由指定在 <Route> 的组件中。有关更多详细信息，请参见此答案：https://dev59.com/VVgR5IYBdhLWcg3wUL4J#43311025

- Janne Annala