Question

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

因此，为了澄清，我希望我的家乡路线在另一条路线上不活跃。

我做错了什么？

由于

Answer 1

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

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

或

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

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}”道具，它应该按预期工作。

谢谢，希望这有帮助。

Answer 3

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

Answer 4

我想使用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>

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

4 个答案: