使用反应路由器当前路由有条件地在菜单上设置活动类答案

【问题标题】：Conditionally set active class on menu using react router current route使用反应路由器当前路由有条件地在菜单上设置活动类
【发布时间】：2016-03-28 09:01:08
【问题描述】：

我正在使用 react router 1.0.2，我的路由如下所示：

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App}>
        <IndexRoute component={Home}/>
        <Route path="triangles" component={Triangles}/>
      </Route>
    </Router>
  </Provider>,
  document.querySelector('.container')
);

我的 App 组件看起来像这样，我想我可以在 props 中传递位置：

import React, {Component} from 'react';

import Menu from './menu';

export default class App extends Component {
  render() {
    return (
      <div>
        <Menu/>
        <div className="jumbotron">
         {this.props.children && React.cloneElement(this.props.children, {
            location: this.props.location
          })}
        </div>
      </div>
    );
  }
};

我想有条件地在 Menu 组件上设置一个活动类：

import React, {Component} from 'react';

import { pushPath } from 'redux-simple-router';
import { Link } from 'react-router';

    export default class Menu extends Component {
      render() {
        return (
            <nav role="navigation" className="navbar navbar-default">
              <div id="navbarCollapse" className="collapse navbar-collapse">
                <ul className="nav navbar-nav">
                  <li className={this.props.location.pathname === '/' ? 'active' : ''}>
                    <Link to="/">Home</Link>
                  </li>
                </ul>
              </div>
            </nav>
        );
      }
    };

但是调用菜单的渲染函数时this.props.location为空？

如何将 props 传递给子组件？

【问题讨论】：

我记得为此使用了 props.params。我不完全确定。

标签： reactjs react-routing

【解决方案1】：

在活动导航元素上设置类

import { NavLink } from 'react-router-dom';

<NavLink to="/Home" activeClassName="active">Home</NavLink>

【讨论】：

【解决方案2】：

您似乎没有将道具传递给正确的元素。 App 的 children 将是正在渲染的任何子路由（因此 Home 或 Triangles），但您希望将道具传递给 Menu。

为此，只需通过 JSX 传入即可：

import React, {Component} from 'react';

import Menu from './menu';

export default class App extends Component {
  render() {
    return (
      <div>
        <Menu location={this.props.location} />
        <div className="jumbotron">
          {this.props.children}
        </div>
      </div>
    );
  }
};

【讨论】：

【解决方案3】：

您需要使用 React Router 的 <NavLink> 组件，该组件允许您在链接处于活动状态时定义样式或添加类。只需将activeClassName 或activeStyle 属性设置为<NavLink> 组件即可。

这是内置在 React Router 中的，更多详细信息请参见官方文档：https://reacttraining.com/react-router/web/api/NavLink

【讨论】：

我相信你需要使用的 React 组件是。这是具有扩展功能的。这应该是 2017 年及之后的正确答案。

【解决方案4】：

对我来说有效的是使用NavLink，因为它具有这个活动类属性。

先导入

import { NavLink } from 'react-router-dom';

使用activeClassName 获取活动类属性。

<NavLink to="/" activeClassName="active">
     Home
</NavLink>

<NavLink to="/store" activeClassName="active">
     Store
</NavLink>

<NavLink to="/about" activeClassName="active">
     About Us
</NavLink>

通过属性 active 在 CSS 中为您的课程设置样式。
```
.active{
    color:#fcfcfc;
 }
```

【讨论】：