Как управлять маршрутизацией в React

Как управлять маршрутизацией в React

От автора: в одном из предыдущих уроков мы познакомились с 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 приложение.

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

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

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. Мы создали компонент без состояния App, возвращающий заголовок. Функция render отрисовывает компонент внутри элемента приложения на странице app.html.

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

webpack-dev-server

Перейдите в своем браузере по адресу localhost:8080/app.html, это должно запустить приложение.

Создаем виды React

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

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

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

В компоненте Navigation у нас есть заголовок приложения и вновь созданное меню для перемещения между экранами. Компонент довольно простой, 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.

Соединяем виды с помощью 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(
 <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, который работает точно так же, как 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

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

Заключение

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

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

Автор: Roy Agasthyan

Источник: https://code.tutsplus.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Уроки AngularJS

Изучите все возможности AngularJS в авторском курсе!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree