> 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/ssilka_na_glavnuyu.md).

# Ссылка на главную

Перед нами простая задача - добавить ссылку на главную. Это навигационная ссылка? Да. Значит используем `<NavLink />`

*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='/'>Главная</NavLink></li>
          <li><NavLink to='/admin'>Админка</NavLink></li>
          <li><NavLink to='/list'>Список жанров</NavLink></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
}
```

Посмотрим в браузере:

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

Тот самый случай, когда проблема решается без документации с помощью "инспектора" (вкладки React в консоли хрома). Видим свойство - *onlyActiveOnIndex: false*

Исправляем:

*src/containers/App/index.js*

```javascript
...
<li><NavLink onlyActiveOnIndex={true} to='/'>Главная</NavLink></li>
...
```

Проверим:

![index\_link\_correct](https://3680687529-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvLmy8thtUGaR8ZQUr5%2F-LvLmypFykU2PFAcf3I2%2F-LvLn_XkIT-RpI3ugi_Z%2Findex_link_2.jpg?generation=1575561878549389\&alt=media)

Отлично.

По умолчанию onlyActiveOnIndex - false. Поэтому, так как адрес у нас состоял из двух активных роутов ( / + list ) оба компонента `<Link />` получили класс `.active`

В качестве бонуса **вопрос**: мы прописали *onlyActiveOnIndex* для нашего компонента `<NavLink />`, как `<Link />` узнал, что свойство *onlyActiveOnIndex* = *true* ?

**Ответ**: Все благодаря тому, что мы использовали *spread operator*. Вспомним подробнее строку из файла *src/components/NavLink/index.js*:

```javascript
return <Link {...this.props} activeClassName='active'/>
```

Запись `{...this.props}` означает "возьми все свойства" (возьми все **props**).

![nav\_link\_props](https://3680687529-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvLmy8thtUGaR8ZQUr5%2F-LvLmypFykU2PFAcf3I2%2F-LvLn_XmhldI02kTA5nU%2Fnavlink_onlyactive_prop.jpg?generation=1575561878363646\&alt=media)

Позже мы добавляем ко всем полученным свойствам еще одно - *activeClassName*.

Кстати, если нажать на "Главная" - ссылка подсветится. Это тоже результат работы - onlyActiveOnIndex

**Итого**: мы научились подсвечивать "ссылку на главную" без ущерба для остальной навигации.

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