react-router-course-ru
  • Вступление
  • Подготовка
    • Настраиваем dev-окружение
  • Создаем примитивный роутер
  • Подключаем react-router
    • BrowserHistory vs HashHistory
    • Дописываем роуты
    • Активная ссылка
      • Ссылка на главную
    • IndexRedirect
    • Программируем переходы
    • Разделение доступа
    • Подтверждение перехода
    • Итого по роутингу
  • Подключаем redux
    • store.dispatch редирект
    • "Закрытый" компонент
    • Итого по react-router + redux
Powered by GitBook
On this page
  • Активная ссылка
  • Порефакторим
  • Навигационные ссылки (краткий перевод)

Was this helpful?

  1. Подключаем react-router

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

PreviousДописываем роутыNextСсылка на главную

Last updated 5 years ago

Was this helpful?

ОБНОВЛЕНИЕ 2018: в учебнике хорошая теория, но ему уже два года. Проверяйте версии пакетов. За выходом нового учебника можно следить в или

На так же проводятся бесплатные вебинары, публикуются переводы и авторские материалы, !

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

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

Однако, чтобы подкрасить ссылку, нам нужно куда-то положить стили. Для этого, еще раз взглянем на любой компонент из проекта : cтили положены вместе с компонентом. Предлагаю делать так же.

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

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

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

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

src/containers/App/styles.scss

.active {
  font-weight: bold;
}

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

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

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

src/containers/App/index.js

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>
    )
  }
}

Проверим?

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

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

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

src/components/NavLink/index.js

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

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)

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

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

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

настаивает, чтобы я рассказал вам еще немного. Поэтому я приведу краткий перевод ниже.

Мы будем использовать (троеточие ... , по-русски ). Он склонирует все props, а значит и activeClassName. То что нам нужно.

на данный момент.

Туториал (EN)
spread-оператор
здесь
Исходный код
telegram канале
twitter
канале
присоединяйтесь
redux-easy-boilerplate
folders_with_indexjs
active_link_screen
nav_link_with_active_class