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

问题描述 投票:9回答:3

我正在使用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')
);

我的应用程序组件看起来像这样,我想我可以传递道具中的位置:

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为null?

如何将道具传递给子组件?

reactjs react-routing
3个回答
4
投票

看起来你并没有将道具传递给正确的元素。 childrenApp将是呈现的任何儿童路线(所以HomeTriangles),但你希望将道具传递给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>
    );
  }
};

2
投票

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

这内置于React Router中,有关详细信息,请参阅官方文档:https://reacttraining.com/react-router/web/api/NavLink


1
投票

在活动导航元素上设置类

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

&

<NavLink to="/Home" activeClassName="active">Home</NavLink>
© www.soinside.com 2019 - 2024. All rights reserved.