反应路由器和导航按钮

Question

I have navigation buttons (the typical left panel dashboard variety) that use Links to load pages in the main content area.

var {Link, History} = require('react-router');
var React = require('react');

var NavPanelButton = React.createClass({

  mixins: [History],

  click: function (e) {
    e.preventDefault();
    this.history.pushState(null, this.props.link);
  },

  render: function () {
    var iconClasses = `fa fa-${this.props.icon} fa-fw`;
    return (
      <div className="nav-panel-button" onClick={this.click}>
        <Link to={this.props.link}>
          <i className={iconClasses}/> {this.props.children}
        </Link>
      </div>
    );
  }

});

When a button gets clicked, I need to change its state to selected so I can add a CSS class and change its background color.

What is the right way to do this with React Router? I could just have the buttons manage their own selected state, but that will break down because sometimes the navigation (the button click) will be prevented and aborted because the user hasn't saved changes on the current page.

Answer 1

Link has a property called activeClassName which you can use. Whatever the value is specified that className is being added to the Link component when it's active.

You also can use the history which is available in props if it's a route component or get the history of context for other components and use this.props.history.isActive('/pathToCheck')

Example:

import { Link, History } from 'react-router'

const Tab = React.createClass({
  mixins: [ History ],
  render() {
    let isActive = this.history.isActive(this.props.to, this.props.query)
    let className = isActive ? 'active' : ''
    return <li className={className}><Link {...this.props}/></li>
  }
})

// use it just like <Link/>, and you'll get an anchor wrapped in an `li`
// with an automatic `active` class on both.
<Tab href="foo">Foo</Tab>

you can use the same with use of context instead of History mixin.