So fügen Sie meinen Navigationslinks eine aktive Klasse hinzu React router?

Question

Ich bin sehr neu zu ReactJS und ich bin wirklich auf diesem ein, also bitte gedulden Sie sich. Ich habe mich gefragt, ob es eine Möglichkeit gibt, meinen Navigationslinks eine aktive Klasse hinzuzufügen, indem ich den reaktiven Router verwende. Dies ist, was mein Code aussieht ....

import React, { Component, PropTypes } from 'react'; 
    import history from '../../core/history'; 

    function isLeftClickEvent(event) { 
    return event.button === 0; 
    } 

    function isModifiedEvent(event) { 
    return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey); 
    } 

    class Link extends Component { // eslint-disable-line react/prefer-stateless- function 

    static propTypes = { 
    to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired, 
    onClick: PropTypes.func 
    }; 

    handleClick = (event) => { 
    let allowTransition = true; 

    if (this.props.onClick) { 
     this.props.onClick(event); 
    } 

    if (isModifiedEvent(event) || !isLeftClickEvent(event)) { 
     return; 
    } 

    if (event.defaultPrevented === true) { 
     allowTransition = false; 
    } 

    event.preventDefault(); 

    if (allowTransition) { 
     if (this.props.to) { 
     history.push(this.props.to); 
     } else { 
     history.push({ 
      pathname: event.currentTarget.pathname, 
      search: event.currentTarget.search 
     }); 
     } 
    } 
    }; 

    render() { 
    const { to, ...props } = this.props; // eslint-disable-line no-use-before-define 
    return <a href={history.createHref(to)} {...props} onClick={this.handleClick} />; 
    } 

} 

export default Link; 


import React, { PropTypes } from 'react'; 
import cx from 'classnames'; 
import withStyles from 'isomorphic-style-loader/lib/withStyles'; 
import s from './Navigation.css'; 
import Link from '../Link'; 


function Navigation({ className }) { 
    return (
    <div className={cx(s.root, className)} role="navigation"> 
     <Link className={s.link + ' fa fa-dribbble'} to="/dribbble"/> 
     <Link className={s.link + ' fa fa-behance' } to="/behance"/> 
     <Link className={s.link + ' fa fa-linkedin' } to="/linkedin"/> 
     <Link className={s.link + ' fa fa-twitter' } to="/twitter"/> 
     <Link className={s.link + ' fa fa-instagram' } to="/instagram"/> 
     <Link className={s.link + ' fa fa-vimeo' } to="/vimeo"/> 
    </div> 
); 
} 

Navigation.propTypes = { 
    className: PropTypes.string 
}; 

export default withStyles(s)(Navigation); 

Was soll ich tun, um eine aktive Klasse wie folgt beispielsweise hinzufügen:

<a class="link active">Home</a> 
<a class="link">About</a> 
<a class="link">Contact</a> 
<a class="link">Work</a> 
<a class="link">Support</a> 

Alle Ideen, wie dies zu tun? Ich habe Herumspielen mit reagieren, aber ich kann eine einfache Möglichkeit finden, es zu tun ..

Answer 1

Sie können die Art des aktiven Link ändern:

import React from 'react'; 
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router'; 

const ACTIVE = { background: '#286090', color: '#fff'} 
// In your render 
<li><Link to="/case" activeStyle={ACTIVE}>case</Link></li> 
<li><Link to="/primarysource" activeStyle={ACTIVE}>primarysource</Link></li>     
<li><Link to="/literature" activeStyle={ACTIVE}>literature</Link></li>   
<li><Link to="/study" activeStyle={ACTIVE}>study</Link></li> 

Ein Beispiel kann in der Reaktion-Router finden github Beispiele https://github.com/reactjs/react-router/blob/master/examples/active-links/app.js

Answer 2

Eigentlich fand ich die Antwort hier ist es

function Navigation({ className }) { 
    return (
    <div className={cx(s.root, className)} role="navigation"> 
     <Link className={cx(s.link, 'fa fa-dribbble', { 'active': location.pathname === '/dribbble' })} to="/dribbble" /> 
     <Link className={cx(s.link, 'fa fa-behance', { 'active': location.pathname === '/behance' })} to="/behance" /> 
     <Link className={cx(s.link, ' fa fa-linkedin', { 'active': location.pathname === '/linkedin' })} to="/linkedin" /> 
     <Link className={cx(s.link, ' fa fa-twitter', { 'active': location.pathname === '/twitter' })} to="/twitter" /> 
     <Link className={cx(s.link, ' fa fa-instagram', { 'active': location.pathname === '/instagram' })} to="/instagram" /> 
     <Link className={cx(s.link, ' fa fa-vimeo', { 'active': location.pathname === '/vimeo' })} to="/vimeo" /> 
    </div> 
); 
} 

HINWEIS: Diese ohne Router

Reagieren ist

Answer 3

habe ich nur activeClassName = „aktiv“

<Link to="/" activeClassName="active"> 
          <i className="fa fa-tachometer" aria-hidden="true"></i><br/>Dashboard</Link>