Як керувати маршрутизацією в React

42

Від автора: в одному з попередніх уроків ми познайомилися з React і JSX. У цьому уроці ми дізнаємося, як створити додаток на React. Особливу увагу ми приділимо маршрутизації в React додатках за допомогою react-router.

Починаємо

Почнемо з ініціалізації нашого проекту з допомогою npm.

mkdir reactRoutingApp
cd reactRoutingApp
npm init

Встановіть обов’язкові бібліотеки react і react-dom в проект.

npm install react react-dom —save

Ми будемо використовувати запаковщик модулів webpack в цьому проекті. Встановіть webpack і webpack development server.

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

Конвертувати синтаксис JSX в JavaScript ми будемо з допомогою Babel. Встановіть пакет лейблів в наш проект.

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

webpack-dev-server необхідний файл конфігурації, де ми пропишемо вхідний файл, вихідний файл, а також завантажувач лейблів. Ось так буде виглядати наш файл 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 додаток.

TutsPlus — React Routing Basic

Давайте створимо файл-точку входу app.js у нашому React додатку.

import React from ‘react’;
import {render} from ‘react-dom’;
const App = () => {
return (

{‘TutsPlus — Welcome to React Routing Basic!’}

);
};
render(
,
document.getElementById(‘app’)
);

У коді вище видно, що ми імпортували react і react-dom. Ми створили компонент без стану App, повертає заголовок. Функція render розмальовує компонент всередині елемента програми на сторінці app.html.

Запустимо сервер webpack. Додаток має запуститися і показати повідомлення з компонента.

webpack-dev-server

Перейдіть у своєму браузері за адресою localhost:8080/app.html це має запустити додаток.

Створюємо види React

Щойно ми запустили додаток на React. Давайте створимо кілька видів для нашого додатки з маршрутизації. Щоб не ускладнювати, все компоненти ми створимо в одному файлі app.js.

Створимо головний компонент navigation у файлі app.js.

const Navigation = () => {
return (

  • {‘Home’}
  • {‘Contact’}
  • {‘About’}

);
};

У компоненті Navigation у нас є заголовок додатка і знову створене меню для переміщення між екранами. Компонент досить простий HTML код стандартний. Давайте створимо екрани для сторінок Contact та About.

const About = () => {
return (

{‘Welcome to About!’}

);
};
const Contact = () => {
return (

{‘Welcome to Contact!’}

);
};

Ми створили компонент, який буде перетворювати екрани About і Contact.

З’єднуємо види з допомогою react-router

Щоб поєднати різні види, нам знадобиться 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(
,
document.getElementById(‘app’)
);

Коли користувач буде заходити на маршрут /, буде отрисовываться компонент Navigation. При заході на /about буде отрисовываться компонент About, а при переході на /contact буде отрисовываться Contact.

Змініть екрани About і Contact, додайте посилання на домашній екран. Для зв’язки екранів ми будемо використовувати Link, який працює точно так само, як HTML посилання.

const About = () => {
return (

{‘Welcome to About!’}

{‘Back to Home’}
);
};
const Contact = () => {
return (

{‘Welcome to Contact!’}

{‘Back to Home’}
);
};

Змініть компонент Navigation, додайте посилання на інші екрани.

const Navigation = () => {
return (

  • {‘Home’}
  • {‘Contact’}
  • {‘About’}

);
};

Збережіть зміни і перезавантажте webpack сервер.

webpack-dev-server

Перейдіть у браузері за адресою localhost:8080/app.html і перед вами відкриється додаток з налаштованої базової маршрутизацією.

Висновок

У цьому уроці ми дізналися, як створити додаток в React, а також як зв’язати компоненти з допомогою react-router. Ми навчилися створювати різні маршрути і пов’язувати їх за допомогою react-router.

Ви вже працювали з react-router або будь-який інший бібліотекою для маршрутизації? Пишіть про це в коментарях.
Исходники можна подивитися на GitHub.