> For the complete documentation index, see [llms.txt](https://max-frontend.gitbook.io/react-router-course-ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://max-frontend.gitbook.io/react-router-course-ru/podklyuchaem_react-router/aktivnaya_ssilka.md).

# Активная ссылка

*ОБНОВЛЕНИЕ 2018: в учебнике хорошая теория, но ему уже два года. Проверяйте версии пакетов. За выходом нового учебника можно следить в* [*telegram канале*](http://bit.ly/2FI9nhs) *или* [*twitter*](http://bit.ly/2FU6zRL)

*На* [*канале*](http://bit.ly/2FI9nhs) *так же проводятся бесплатные вебинары, публикуются переводы и авторские материалы,* [*присоединяйтесь*](http://bit.ly/2FI9nhs)*!*

## Активная ссылка

*Кто не мечтал подкрасить активную ссылку - тот не делал сайтов (ц) - народная мудрость.*

Однако, чтобы подкрасить ссылку, нам нужно куда-то положить стили. Для этого, еще раз взглянем на любой компонент из проекта [redux-easy-boilerplate](https://github.com/anorudes/redux-easy-boilerplate/tree/master/src/components/Header): cтили положены вместе с компонентом. Предлагаю делать так же.

### Порефакторим

Создайте для всех компонентов свою директорию и положите в нее *index.js* файл. Файлы стилей будем добавлять по мере необходимости.

*Необходимо создать директорию с названием, равным названию файла компонента, а сам файл компонента переименовать в index.js В таком случае, не придется даже изменять что-то в подключении роутов.*

![folders\_with\_indexjs](https://3680687529-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvLmy8thtUGaR8ZQUr5%2F-LvLmypFykU2PFAcf3I2%2F-LvLn__xZtItVMSPHOiS%2Ffolders_with_indexjs_v2.jpg?generation=1575561878936723\&alt=media)

Создадим файл стилей для компонента (*контейнера*) `<App />`

*src/containers/App/styles.scss*

```css
.active {
  font-weight: bold;
}
```

Чтобы ссылка реагировала на активность, нужно добавить компоненту `<Link />` атрибут **activeClassName**. Например:

```javascript
<Link to='/list' activeClassName='active'>Список жанров</Link>
```

Важно не забыть импортировать файл стилей. Обработка scss в конфиге вебпака уже прописана, поэтому остается лишь изменить содержимое `<App />`:

*src/containers/App/index.js*

```javascript
import React, { Component } from 'react'
import { Link } from 'react-router'

import './styles.scss'

export default class App extends Component {
  render() {
    return (
      <div className='container'>
        <ul className='nav nav-pills'>
          <li><Link to='/admin' activeClassName='active'>Админка</Link></li>
          <li><Link to='/list' activeClassName='active'>Список жанров</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
}
```

Проверим?

![active\_link\_screen](https://3680687529-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvLmy8thtUGaR8ZQUr5%2F-LvLmypFykU2PFAcf3I2%2F-LvLn__zSKzq8MRnfgBL%2Factive_link.jpg?generation=1575561879061079\&alt=media)

[Туториал (EN)](https://github.com/reactjs/react-router-tutorial/tree/master/lessons/05-active-links#nav-link-wrappers) настаивает, чтобы я рассказал вам еще немного. Поэтому я приведу краткий перевод ниже.

### Навигационные ссылки (краткий перевод)

Обычно вам не нужно, чтобы ссылки на сайте умели быть активными/не активными. Это требуется только для навигационных ссылок. Чтобы не писать *activeClassName* "ручками", можно сделать обертку над компонентом `<Link />`,

Мы будем использовать [*spread-оператор*](https://github.com/sebmarkbage/ecmascript-rest-spread) (троеточие **...** , по-русски [здесь](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Spread_operator)). Он склонирует все *props*, а значит и *activeClassName*. То что нам нужно.

Создадим компонент `<NavLink />` (а так же, переместите *styles.scss* из *src/containers/App* в *src/components/NavLink*)

*src/components/NavLink/index.js*

```javascript
import React, { Component } from 'react'
import { Link } from 'react-router'

import './styles.scss'

export default class NavLink extends Component {
  render() {
    return <Link {...this.props} activeClassName='active'/>
  }
}
```

Остается изменить `<App />`:

*src/containers/App/index.js*

```javascript
import React, { Component } from 'react'
import NavLink from '../../components/NavLink'

export default class App extends Component {
  render() {
    return (
      <div className='container'>
        <ul className='nav nav-pills'>
          <li><NavLink to='/admin'>Админка</NavLink></li>
          <li><NavLink to='/list'>Список жанров</NavLink></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
}
```

(удалили импорт `<Link />`, добавили `<NavLink />`, заменили все вхождения *Link* на *NavLink*)

Посмотрим на результат:

![nav\_link\_with\_active\_class](https://3680687529-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvLmy8thtUGaR8ZQUr5%2F-LvLmypFykU2PFAcf3I2%2F-LvLn_a0HBMbiist6XFe%2Fnav_link_v2.jpg?generation=1575561879085284\&alt=media)

**Итого**: чтобы ссылка "умела быть активной" - достаточно добавить *activeClassName* для компонента `<Link />`.

P.S. прием с оборачиванием компонента - очень мощный. Возьмите его на вооружение.

[Исходный код](https://github.com/maxfarseer/react-router-ru-tutorial/tree/active_link) на данный момент.