Активная ссылка¶
Кто не мечтал подкрасить активную ссылку - тот не делал сайтов (ц) - народная мудрость.
Однако, чтобы подкрасить ссылку, нам нужно куда-то положить стили. Для этого, еще раз взглянем на любой компонент из проекта redux-easy-boilerplate: 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>
)
}
}
Проверим?
Туториал (EN) настаивает, чтобы я рассказал вам еще немного. Поэтому я приведу краткий перевод ниже.
Навигационные ссылки¶
Обычно вам не нужно, чтобы ссылки на сайте умели быть активными/не активными. Это требуется только для навигационных ссылок. Чтобы не писать activeClassName
"ручками", можно сделать обертку над компонентом <Link />
.
Мы будем использовать spread-оператор (троеточие ...
, по-русски здесь). Он склонирует все props
, а значит и activeClassName
. То что нам нужно.
Создадим компонент <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. прием с оборачиванием компонента - очень мощный. Возьмите его на вооружение.
Исходный код на данный момент.