it-roy-ru.com

Как установить activeClassName для элемента-обертки Link или IndexLink в реакции-маршрутизаторе?

Я новичок в мире ReactJS и хотел бы знать, как я могу передать имя активного класса элементу <li> вместо элемента <a>(Link).

Теперь у меня есть такой код. Якорный класс изменяется при нажатии.

<li><IndexLink to='/' activeclassName='active'>A</IndexLink></li>
<li><Link to='/b' activeclassName='active'>B</Link></li>
<li><Link to='/c' activeclassName='active'>C</Link></li>

Но я хотел бы получить что-то похожее на:

<li activeclassName='active'><IndexLink to='/'>A</IndexLink></li>
<li activeclassName='active'><Link to='/b'>B</Link></li>
<li activeclassName='active'><Link to='/c'>C</Link></li>

Заранее спасибо

42
abekenza

Вам необходимо заключить свой <li> как компонент, поддерживающий маршрутизатор:

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

class NavItem extends React.Component {
  render () {
    const { router } = this.context
    const { index, onlyActiveOnIndex, to, children, ...props } = this.props

    const isActive = router.isActive(to, onlyActiveOnIndex)
    const LinkComponent = index ? Link : IndexLink

    return (
      <li className={isActive ? 'active' : ''}>
        <LinkComponent {...props}>{children}</LinkComponent>
      </li>
    )
  }
}

Использование:

<ul>
  <NavItem to='/' index={true}>Home</NavItem>
  <NavItem to='/a'>A</NavItem>
</ul>

Я черпал вдохновение из модуляact-router-bootstrap, https://github.com/react-bootstrap/react-router-bootstrap/blob/master/src/LinkContainer.js . Я не проверял это, хотя, так дайте мне знать, как это идет.

37
Marc Greenstock

Другие ответы не работают в React Router v4. Вот как вы можете это сделать:

import React, {PropTypes} from 'react'
import {Route, Link} from 'react-router-dom'
import styles from './styles.less';

export default function NavItem({children, to, exact}) {
    return (
        <Route path={to} exact={exact} children={({match}) => (
            <li className={match ? styles.activeRoute : null}>
                <Link to={to}>{children}</Link>
            </li>
        )}/>
    )
}

NavItem.propTypes = {
    to: PropTypes.string.isRequired,
    exact: PropTypes.bool,
    children: PropTypes.node.isRequired,
};
17
mpen
/**
 * A navigation component
 */
import React, { Component } from 'react'
import { Link, IndexLink, withRouter } from 'react-router'

import styles from './styles.scss'

class NavItem extends Component {
  render () {
    const { router } = this.props
    const { index, to, children, ...props } = this.props

    let isActive
    if( router.isActive('/',true) && index ) isActive = true
    else  isActive = router.isActive(to)
    const LinkComponent = index ?  IndexLink : Link

    return (
      <li className={isActive ? 'active' : ''}>
        <LinkComponent to={to} {...props}>{children}</LinkComponent>
      </li>
    )
  }
}

NavItem = withRouter(NavItem)

export default NavItem

Использование:

<ul className="nav nav-tabs"> 
  <NavItem to='/home' index={true} >Home</NavItem>
  <NavItem to='/about'>About</NavItem>
</ul>
10
bryanyu

Вместо использования <Link />, я использую <NavLink />, и он работает также. 

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';

//.....

export default class AppNav extends Component {

    render (){
        return (
                <header>
                    <ul className="main-nav">
                        <li><NavLink activeClassName={"active"} exact={true} to="/">Home</NavLink></li>
                        <li><NavLink activeClassName={"active"} to="/about">About</NavLink></li>
                        <li><NavLink activeClassName={"active"} to="/courses">Courses</NavLink></li>
                    </ul>
                </header>
        );
    }
}
6
Dimang Chou
{/* Make sure that `location` is injected into this component */}
<ul className="nav navbar-nav">
  <li className={location.pathname === '/' && 'active'}>
    <Link to='/'>
      Home page
    </Link>
  </li>
  <li className={location.pathname.startsWith('/about') && 'active'}>
    <Link to='/about'>
      About us
    </Link>
  </li>
</ul>
4
Ken Berkeley

Отличный ответ.

Просто измените следующее, чтобы оно заработало ...

LinkComponent = index ? IndexLink : Link //If its true you want an IndexLink 

//Also link needs to be...
<NavItem to="/" onlyActiveOnIndex index={true}>Home</NavItem>
3
Matthew Berends

Попробуйте с помощью response-router-active-component .

Я не мог заставить ни один из предыдущих ответов легко работать из-за несовместимости между реакцией или версией TypeScript (это определенно не зрелая экосистема), но этот компонент сделал свое дело и может быть применен к другим элементам, кроме li, если необходимо:

import activeComponent from 'react-router-active-component'
let NavItem = activeComponent('li');
...
<NavItem to='/' onlyActiveOnIndex>Home</NavItem>
<NavItem to='/generate-keywords'>Generate keywords</NavItem>
1
Erwin Mayer

Используя реакцию 15.1.0, реактив-маршрутизатор 2.5.0 и загрузчик 3.3 (это менее важно), я разработал это решение для активизации ссылок:

npm install --save classnames

npm install --save lodash

Компонент:

import React from 'react';
import { Link, IndexLink } from 'react-router';
import _ from 'lodash';
import classnames from 'classnames';

class NavItem extends React.Component {
  constructor(props) {
    super(props);

    // The default state
    this.state = {
      isActive: false,
      unregisterRouteListener: false
    };

    // Binding for functions
    this.locationHasChanged = this.locationHasChanged.bind(this);
  }

  componentDidMount() {
    // Check if component is active on mount and add listener on route change
    this.setState({
      isActive: this.context.router.isActive(this.props.to, true),
      unregisterRouteListener: this.context.router.listen(this.locationHasChanged)
    });
  }

  componentWillUnmount() {
    if (this.state.unregisterRouteListener) {
      // Remove the listener
      this.state.unregisterRouteListener();
    }

    // Reset the state
    this.setState({
      isActive: false,
      unregisterRouteListener: false
    });
  }

  // Update the state of the component, based on the router path
  locationHasChanged() {
    this.setState({
      isActive: this.context.router.isActive(this.props.to, true)
    });
  }

  render () {
    let { index } = this.props;
    let LinkComponent = index ? Link : IndexLink;
    let newProps = _.omit(this.props, 'router');

    return (
      <li className={classnames('', this.state.isActive ? 'active' : '' )}>
        <LinkComponent {...newProps}>
          {this.props.children}
        </LinkComponent>
      </li>
    );
  }
}

NavItem.contextTypes = {
  router: React.PropTypes.object
};

export default NavItem;

Использование:

<NavItem to="/list">List</NavItem>

Я новичок в React, поэтому приведенное выше решение, безусловно, нуждается в улучшении и может содержать ошибки подхода. Тем не менее, он также может содержать полезную информацию или отправную точку для заинтересованных лиц. 

Любые отзывы или предложения приветствуются. Спасибо! :)

1
Cristi Draghici

Используя React Router v4, я только заставил его работать, включив теги <li> в компонент NavLink. Решения с тегами <li>, обертывающими ссылки, привели к тому, что тег HOME <li> всегда имеет класс active.

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

class Header extends React.Component {

  render() {
    return (
      <div>
        <header>

          <nav>
            <ul>
              <NavLink activeClassName={"active"} exact={true} to="/"><li>Home</li></NavLink>
              <NavLink activeClassName={"active"} to="/about"><li>About</li></NavLink>
              <NavLink activeClassName={"active"} to="/courses"><li>Courses</li></NavLink>
            </ul>
          </nav>

        </header>
      </div>
    )
  }
}

export default Header

Я настроил CSS-селекторы li и a соответственно.

0
Steve Breese

Я использую React Router v4.2, и я не смог получить ссылку на объект маршрутизатора из компонента обтекания, потому что контекст недоступен.

Это не сработало:

const { router } = this.context

Мне нравится @ mpen's answer , но я использую вложенные маршруты и не хочу менять файл, в котором определен компонент маршрутизации.

То, что я сделал, сравнил location.pathname с:

const NavItem = withRouter((props) => {
const { to, children, location } = props;
return (
    <li className={location.pathname == to ? 'active' : null}>
        <Link to={to}>{children}</Link >
    </li>
)});
0
Jernej Gorički