React — это библиотека JavaScript, созданная Facebook для создания пользовательских интерфейсов. Если вы новичок в React, я бы порекомендовал прочитать одно из наших предыдущих руководств по началу работы с React . В этом руководстве мы обсудим, как обрабатывать вложенную маршрутизацию в веб-приложении React.
Настройка приложения
Мы начнем с настройки нашего веб-приложения React. Давайте создадим папку проекта с именем ReactRouting . Внутри ReactRouting создайте файл с именем app.html . Ниже app.html файл app.html :
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<html>
<head>
<title>TutsPlus — React Nested Routing</title>
</head>
<body>
<div id=»app»></div>
<script src=»bundle.js»></script>
</body>
</html>
|
Внутри папки ReactRouting инициализируйте проект с помощью Node Package Manager (npm).
|
1
|
npm init
|
Введите детали проекта или нажмите Enter для значений по умолчанию, и вы должны иметь файл package.json в папке ReactRouting .
|
01
02
03
04
05
06
07
08
09
10
11
|
{
«name»: «reactroutingapp»,
«version»: «1.0.0»,
«description»: «»,
«main»: «app.js»,
«scripts»: {
«test»: «echo \»Error: no test specified\» && exit 1″
},
«author»: «»,
«license»: «ISC»
}
|
Установите зависимости react и react-dom помощью npm.
|
1
|
npm install react react-dom —save
|
Установите пакет babel с помощью npm и сохраните его в файле package.json .
|
1
|
npm install —save-dev webpack-dev-server webpack babel-core babel-loader babel-preset-react babel-preset-es2015
|
Для преобразования кода JSX в JavaScript требуются пакеты babel . Создайте файл конфигурации веб-пакета для обработки конфигураций веб-пакета. Вот как будет выглядеть файл webpack.config.js :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
module.exports = {
entry: ‘./app.js’,
output: {
filename: ‘bundle.js’,
},
module: {
loaders: [
{ exclude: /node_modules/, loader: ‘babel-loader?presets[]=es2015&presets[]=react’ }
]
}
}
|
app.js — это файл, в котором будет находиться наш код React. Создайте файл с именем app.js в папке ReactRouting . Импортируйте необходимые библиотеки реагирования в app.js Создайте компонент с именем App имеющий div с некоторым текстом. Рендеринг компонента с использованием метода рендеринга. Вот как будет выглядеть основной файл app.js :
|
01
02
03
04
05
06
07
08
09
10
11
12
|
import React from ‘react’
import { render } from ‘react-dom’
const App = () => {
return (
<h2>{‘TutsPlus — Welcome to React Nested Routing App’}</h2>
);
};
render((
<App />
),document.getElementById(‘app’))
|
Перезапустите webpack разработки webpack .
|
1
|
webpack-dev-server
|
После перезапуска сервера вы сможете увидеть приложение React, работающее по адресу http: // localhost: 8080 / .
Обработка маршрутизации в реакции
Мы будем использовать react-router для реализации маршрутизации и вложенной маршрутизации. Во-первых, установите react-router в нашем проекте.
|
1
|
npm install react-router —save
|
Теперь у нас установлен react-router . Давайте создадим пару представлений для реализации маршрутизации. Внутри файла app.js создайте два компонента с view1 view2 и view2 . Вот как будет выглядеть код:
|
01
02
03
04
05
06
07
08
09
10
11
|
const View1 = () => {
return(
<h3>{‘Welcome to View1’}</h3>
);
};
const View2 = () => {
return(
<h3>{‘Welcome to View2’}</h3>
);
};
|
Создайте компонент Menu для отображения View1 и View2 при нажатии. Вот как это выглядит:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
const Menu = () => {
return(
<section>
<ul>
<li>{‘Home’}</li>
<li>
<Link to=»/view1″>{‘View1’}</Link>
</li>
<li>
<Link to=»/view2″>{‘View2’}</Link>
</li>
</ul>
</section>
)
};
|
Давайте используем маршрутизатор реагирования для отображения маршрута по умолчанию для нашего приложения. Сделайте компонент Menu маршрутом по умолчанию. Также определите маршрут для компонентов View1 и View2 . Вот как это выглядит:
|
1
2
3
4
5
6
7
|
render(
<Router history={hashHistory}>
<Route component={Menu} path=»/»></Route>
<Route component={View1} path=»/view1″></Route>
<Route component={View2} path=»/view2″></Route>
</Router>,
document.getElementById(‘app’));
|
Сохраните вышеуказанные изменения и перезапустите сервер webpack . Вы должны иметь меню вертикальной навигации по адресу http: // localhost: 8080 / webpack-dev-server / .
Попробуйте нажать на ссылки View1 и View2 , и он должен перейти к соответствующим компонентам.
Вложенные маршруты в реакции
У нас уже есть компонент App который отображает текст заголовка. Предположим, мы хотим, чтобы щелчок меню отображал соответствующий вид, но мы хотим, чтобы он отображался внутри компонента App .
Мы хотим, чтобы навигационное меню было доступно на всех страницах. Чтобы достичь этого, мы попытаемся View1 наши реагирующие компоненты View1 и View2 в компонент App . Поэтому всякий раз, когда View1 отображается, он отображается внутри компонента App .
Теперь измените конфигурацию маршрутизатора и поместите конфигурацию маршрута View1 и View2 маршрут компонента App .
|
1
2
3
4
5
6
7
8
|
render(
<Router history={hashHistory}>
<Route component={App} path=»/»>
<Route component={View1} path=»/view1″></Route>
<Route component={View2} path=»/view2″></Route>
</Route>
</Router>,
document.getElementById(‘app’));
|
Измените компонент App чтобы вставить компонент Menu внутри него.
|
1
2
3
4
5
6
7
8
|
const App = () => {
return (
<div>
<h2>{‘TutsPlus — Welcome to React Nested Routing App’}</h2>
<Menu />
</div>
);
};
|
Чтобы отобразить вложенные маршруты внутри компонента App , мы добавим props.children в компонент App . Передайте props в качестве аргумента функции компоненту App .
|
1
2
3
4
5
6
7
8
9
|
const App = (props) => {
return (
<div>
<h2>{‘TutsPlus — Welcome to React Nested Routing App’}</h2>
<Menu />
{props.children}
</div>
);
};
|
Давайте также добавим один компонент Home в наше приложение.
|
1
2
3
4
5
6
7
8
|
const Home = () => {
return(
<div>
<h3>{‘Welcome Home !!’}</h3>
</div>
);
};
|
Включите компонент Home в список вложенных маршрутов.
|
1
2
3
4
5
6
7
8
9
|
render(
<Router history={hashHistory}>
<Route component={App} path=»/»>
<Route component={Home} path=»/home»></Route>
<Route component={View1} path=»/view1″></Route>
<Route component={View2} path=»/view2″></Route>
</Route>
</Router>,
document.getElementById(‘app’));
|
Сохраните вышеуказанные изменения и перезапустите сервер, и вы сможете просматривать приложение. Нажмите на перечисленные пункты меню, и каждый при нажатии должен отображаться вложенным внутри компонента App .
Завершение
В этом руководстве вы увидели, как реализовать вложенную маршрутизацию в приложении React с использованиемact react-router . Вы можете разработать небольшие независимые компоненты, а затем использовать их для создания более крупных приложений. Возможность объединять небольшие компоненты в большие приложения — вот что делает React действительно мощным.
React становится одной из де-факто платформ для работы в сети. Не обошлось и без обучения, и есть множество ресурсов, которые также могут вас занять. Если вы ищете дополнительные ресурсы для обучения или использования в своей работе, посмотрите, что у нас есть на рынке Envato .
Исходный код из этого урока доступен на GitHub . Дайте нам знать ваши предложения и мысли в комментариях ниже.