Как работать с роутингом в React

Russian (Pусский) translation by Anton L (you can also view the original English article)

В одном из моих предыдущих туториалов, мы узнали, как начать работу с JSX и React. В этом туториале мы разберёмся как настроить и создать React приложение. А точнее, как использовать react-router в React приложении.

Начнём

Давайте начнём инициализируя наш проект с помощью пакетного менеджера Node (npm).

mkdir reactRoutingApp
cd reactRoutingApp
npm init

Установите необходимые для этого проекта библиотеки react и react-dom.

npm install react react-dom --save

Мы будем использовать сборщик модулей webpack и webpack сервер для разработки. Установите webpack и webpack сервер для разработки.

npm install webpack webpack-dev-server --save-dev

Также мы будем использовать Babel для конвертации JSX синтаксиса в обычный JavaScript. Установите следующий babel пакет для вашего проекта.

npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015

webpack-dev-server необходим файл конфигурации, где мы будем указывать основной файл, который будет запускать приложение, файл для вывода и babel загрузчик. Вот как выглядит webpack.config.js:

module.exports = {
    entry: './app.js',
    module: {
        loaders: [
            {
                exclude: /node_modules/,
                loader: 'babel-loader?presets[]=es2015&presets[]=react'
            }
        ]
    },
    output: {
        filename: 'bundle.js'
    }
};

Далее создайте app.html где React приложение будет рендериться.

<html>
    <head>
        <title>TutsPlus - React Routing Basic</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
    </body>
</html>

Давайте создадим файл, который будет запускать приложение React - app.js.

import React from 'react';
import {render} from 'react-dom';

const App = () => {
    return (
        <h2>{'TutsPlus - Welcome to React Routing Basic!'}</h2>
    );
};

render(
    <App />,
    document.getElementById('app')
);

Как видно в коде выше мы импортируем react и react-dom. Мы создали компонент без состояния (stateless), под названием App, который возвращает заголовок. Функция render отвечает за рендеринг компонента в app элементе, на странице app.html.

Запустим webpack сервер и приложение покажет нам сообщение о компоненте.

webpack-dev-server

Откройте ваш браузер по адресу http://localhost:8080/app.html и вы должны увидеть работающее приложение.

Создание React представления (Views)

Теперь когда наше React приложение работает, давайте сделаем пару view для создания роутинга. Ничего сложного, мы даже поместим все компоненты в одном файле app.js.

Сделаем главный компонент под названием navigation в app.js.

const Navigation = () => {
    return (
        <section>
            <App />
            <ul>
                <li>{'Home'}</li>
                <li>{'Contact'}</li>
                <li>{'About'}</li>
            </ul>
        </section>
    );
};

Выше можно видеть Navigation component, там у нас находится заголовок приложения и только что созданное меню навигации для разных страниц приложения. Компонент не представляет ничего сложно, это обычный HTML код. Давайте создадим страницы для Contact и About.

const About = () => {
    return (
        <section>
            <h2>{'Welcome to About!'}</h2>
        </section>
    );
};

const Contact = () => {
    return (
        <section>
            <h2>{'Welcome to Contact!'}</h2>
        </section>
    );
};

Мы только что создали компонент, который будет рендерить About и Contact страницы.

Соединяем View с помощью react-router

Чтобы соединить view мы используем react-router. Установите react-router используя npm.

npm install react-router --save

Импортируйте необходимые библиотеки react-router и app.js.

import {Link, Route, Router} from 'react-router';

Вместо того, чтобы указывать какой компонент отрендерить, мы создадим разные роуты для нашего приложения. Для этого нам и нужен react-router.

Давайте создадим роуты для страниц Home, Contact и About.

render(
    <Router>
        <Route
            component={Navigation}
            path="/"
        />
        <Route
            component={About}
            path="/about"
        />
        <Route
            component={Contact}
            path="/contact"
        />
    </Router>,
    document.getElementById('app')
);

Когда пользователь посещает / роут, компонент Navigation рендерится, посетив /about отрендерится компонент About и открыв /contact рендерится компонент Contact.

Модифицируйте About и Contact страницы, добавив ссылку на домашнюю страницу. Чтобы создать ссылки для страниц, мы используем Link, которая работает также как ссылка (тег <a>) в HTML.

const About = () => {
    return (
        <section>
            <h2>{'Welcome to About!'}</h2>
            <Link to="/">{'Back to Home'}</Link>
        </section>
    );
};

const Contact = () => {
    return (
        <section>
            <h2>{'Welcome to Contact!'}</h2>
            <Link to="/">{'Back to Home'}</Link>
        </section>
    );
};

Модифицируйте Navigation компонент, чтобы добавить ссылки, которые будут вести на другие страницы, с домашней страницы.

const Navigation = () => {
    return (
        <section>
            <App />
            <ul>
                <li>{'Home'}</li>
                <li>
                    <Link to="/contact">{'Contact'}</Link>
                </li>
                <li>
                    <Link to="/about">{'About'}</Link>
                </li>
            </ul>
        </section>
    );
};

Сохраните изменения и перезагрузите webpack сервер.

webpack-dev-server

Откройте адрес http://localhost:8080/app.html, ваше приложение работает и роутинг реализован.

Заключение

В этом туториале мы узнали как создать React приложение и соединить различные компоненты используя react-router. Мы научились как определить различные роуты и добавить соответствующие ссылки с помощью react-router.

Использовали-ли вы react-router или другие библиотеки для роутинга? Сообщите нам в комментариях.

Исходники для этого туториала доступным на GitHub.