react-router 索引路由始终处于活动状态答案

【问题标题】：react-router index route always activereact-router 索引路由始终处于活动状态
【发布时间】：2017-01-04 12:06:12
【问题描述】：

我正在尝试使用 react activeClassName 属性来设置导航样式。到目前为止它按预期工作，但有一个问题 - 我的第一个导航链接指向根路由（/）。因此，即使在另一个 URL 上，它也会将该 URL（例如 /skills）和 root 注册为活动的（因此 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;

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

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

我做错了什么？

谢谢

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

我想reference the docs for React Router（react-router-dom，目前是 v5）和sources。这是最新的实现方式：

精确：布尔值

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

【讨论】：

接受这是正确的答案，因为它引用了最新的解决方案。
感谢您的拯救?

【解决方案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}”道具，它应该可以按预期工作。

谢谢，希望对你有帮助。

【讨论】：

谢谢，它有帮助。我了解到的是，Route 中的“exact”道具有助于在加载组件之前匹配路径，而 NavLink 中的“exact”道具有助于在将“active”类应用于标签之前匹配路径。

【解决方案3】：

您可以使用<IndexLink> 或设置onlyActiveOnIndex 属性用于在其子路径处于活动状态时不会突出显示的链接：

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

或

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

【讨论】：

对于使用react-router-bootstrap的人，等效组件是<IndexLinkContainer>

【解决方案4】：

在 react-router-dom ^4.0 没有 IndexRoute 或 IndexLink。相反，您需要将路由路径指定为exact，并且应在<Route> 的组件内指定子路由。有关详细信息，请参阅此答案：https://stackoverflow.com/a/43311025/2713729

【讨论】：