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

Question

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

有一个简单的解决方法吗？ 我是否应该将 Root 路由定义为其他内容（例如 /home）？

我的header：

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

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

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

要么

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

Answer 2

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

道具exact已被替换为end 。

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

这是React Router Dom 文档参考

Answer 3

如果您使用“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}”道具，它应该按预期工作。

谢谢，希望这会有所帮助。

Answer 4

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

Answer 5

我想引用React Router （ react-router-dom ，目前为v5）和源代码 的文档 。 这是实现此目的的最新方法 ：

确切地说 ：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>