Из этого туториала Вы узнаете, как использовать модули реагировать-маршрутизатор и реагировать-переходную группу для создания многостраничных приложений React с анимацией перехода страниц.
Подготовка приложения React
Установка пакета create-реагировать на приложение
Если у вас когда-нибудь была возможность попробовать React, вы, вероятно, слышали о пакете create-реагировать-приложение , которое позволяет очень легко начать со среды разработки React.
В этом руководстве мы будем использовать этот пакет для запуска нашего приложения React.
Поэтому, прежде всего, убедитесь, что на вашем компьютере установлен Node.js. Он также установит для вас npm.
В своем терминале запустите npm install -g create-react-app . Это глобально установит приложение create-реагировать на ваш компьютер.
Как только это будет сделано, вы можете проверить, есть ли он, набрав create-react-app -V .
Создание проекта React
Теперь пришло время построить наш проект React. Просто запустите create-react-app multi-page-app . Конечно, вы можете заменить multi-page-app чем угодно.
Теперь create-реакции-приложение создаст папку с именем multi-page-app . Просто введите cd multi-page-app чтобы изменить каталог, и теперь запустите npm start для инициализации локального сервера.
Это все. На вашем локальном сервере запущено приложение React.
Теперь пришло время очистить файлы по умолчанию и подготовить наше приложение.
В вашей папке src удалите все, кроме App.js и index.js . Затем откройте index.js и замените содержимое с кодом ниже.
|
1
2
3
4
5
|
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./App’;
ReactDOM.render(<App />, document.getElementById(‘root’));
|
Я в основном удалил строки, связанные с registerServiceWorker а также import './index.css'; линия.
Также замените файл App.js на код ниже.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
import React, { Component } from ‘react’;
class App extends Component {
render() {
return (
<div className=»App»>
</div>
);
}
}
export default App;
|
Теперь мы установим необходимые модули.
В своем терминале введите следующие команды, чтобы установить модули реагировать-маршрутизатор и реагировать-переходной группы соответственно.
npm install react-router-dom --save
npm install [email protected] --save
После установки пакетов вы можете проверить файл package.json внутри основного каталога проекта, чтобы убедиться, что модули включены в зависимости.
Компоненты маршрутизатора
Есть два основных варианта маршрутизатора: HashRouter и BrowserRouter .
Как следует из названия, HashRouter использует хэши для отслеживания ваших ссылок и подходит для статических серверов. С другой стороны, если у вас динамический сервер, лучше использовать BrowserRouter , учитывая тот факт, что ваши URL будут красивее.
Как только вы решите, какой из них использовать, просто добавьте компонент в файл index.js .
import { HashRouter } from 'react-router-dom'
Следующее — обернуть наш компонент <App> компонентом router.
Итак, ваш окончательный файл index.js должен выглядеть так:
|
1
2
3
4
5
6
|
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import { HashRouter } from ‘react-router-dom’
import App from ‘./App’;
ReactDOM.render(<HashRouter><App/></HashRouter>, document.getElementById(‘root’));
|
Если вы используете динамический сервер и предпочитаете использовать BrowserRouter , единственным отличием будет импорт BrowserRouter и использование его для обертывания компонента <App> .
Оборачивая наш компонент <App> , мы передаем объект истории в наше приложение, и, таким образом, другие компоненты реакции-маршрутизатора могут связываться друг с другом.
Внутри <App /> Компонент
Внутри нашего <App> компонента у нас будет два компонента с именами <Menu> и <Content> . Как видно из названий, они будут содержать меню навигации и отображаемый контент соответственно.
Создайте папку с именем «компоненты» в каталоге src , а затем создайте файлы Menu.js и Content.js .
Menu.js
Давайте заполним наш компонент Menu.js
Это будет функциональный компонент без сохранения состояния, поскольку нам не нужны состояния и хуки жизненного цикла.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
import React from ‘react’
const Menu = () =>{
return(
<ul>
<li>Home</li>
<li>Works</li>
<li>About</li>
</ul>
)
}
export default Menu
|
Здесь у нас есть <ul> тегами <li> , которые будут нашими ссылками.
Теперь добавьте следующую строку в ваш компонент меню .
import { Link } from 'react-router-dom'
Затем оберните содержимое тегов <li> <Link> компонентом <Link> .
Компонент <Link> по сути является компонентом реакции-маршрутизатора, действующим как тег <a> , но он не перезагружает вашу страницу с новой целевой ссылкой.
Кроме того, если вы стилизуете тег в CSS, вы заметите, что компонент <Link> получает тот же стиль.
Обратите внимание, что существует более продвинутая версия компонента <Link> , то есть <NavLink> . Это предлагает вам дополнительные функции, чтобы вы могли стилизовать активные ссылки.
Теперь нам нужно определить, куда будет переходить каждая ссылка. Для этого у компонента <Link> есть опора.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
import React from ‘react’
import { Link } from ‘react-router-dom’
const Menu = () =>{
return(
<ul>
<li><Link to=»/»>Home</Link></li>
<li><Link to=»/works»>Works</Link></li>
<li><Link to=»/about»>About</Link></li>
</ul>
)
}
export default Menu
|
Content.js
Внутри нашего компонента <Content> мы определим маршруты, соответствующие ссылкам.
Нам нужны компоненты Switch и Route от реакции-маршрутизатора-dom. Итак, прежде всего, импортируйте их.
import { Switch, Route } from 'react-router-dom'
Во-вторых, импортируйте компоненты, к которым мы хотим направить. Это компоненты Home , Works и About для нашего примера. Предполагая, что вы уже создали эти компоненты в папке компонентов , мы также должны импортировать их.
import Home from './Home'
import Works from './Works'
import About from './About'
Эти компоненты могут быть чем угодно. Я просто определил их как функциональные компоненты без сохранения состояния с минимальным содержанием. Пример шаблона ниже. Вы можете использовать это для всех трех компонентов, но не забудьте изменить имена соответственно.
|
01
02
03
04
05
06
07
08
09
10
11
|
import React from ‘react’
const Home = () =>{
return(
<div>
Home
</div>
)
}
export default Home
|
переключатель
Мы используем компонент <Switch> для группировки наших компонентов <Route> . Switch ищет все маршруты, а затем возвращает первый соответствующий.
маршрут
Маршруты — это компоненты, вызывающие целевой компонент, если он совпадает с указателем path .
Окончательная версия нашего файла Content.js выглядит следующим образом:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
import React from ‘react’
import { Switch, Route } from ‘react-router-dom’
import Home from ‘./Home’
import Works from ‘./Works’
import About from ‘./About’
const Content = () =>{
return(
<Switch>
<Route exact path=»/» component={Home}/>
<Route path=»/works» component={Works}/>
<Route path=»/about» component={About}/>
</Switch>
)
}
export default Content
|
Обратите внимание, что для компонента Home , который является основным каталогом, требуется дополнительный exact реквизит. Используя exact силы, Маршрут совпадает с точным путем. Если он не используется, другие пути, начинающиеся с / , также будут соответствовать компоненту Home , и для каждой ссылки будет отображаться только компонент Home .
Теперь, когда вы нажимаете ссылки меню, ваше приложение должно переключать контент.
Анимация маршрутов переходов
Пока у нас есть работающая система маршрутизаторов. Теперь мы будем анимировать маршруты переходов. Для этого мы будем использовать модуль реагировать-переходной группы .
Мы будем анимировать состояние монтажа каждого компонента. При маршрутизации различных компонентов с помощью компонента « Маршрут» внутри коммутатора вы по существу монтируете и размонтируете различные компоненты соответственно.
Мы будем использовать response-transition-group в каждом компоненте, который мы хотим анимировать. Таким образом, вы можете иметь различную анимацию монтажа для каждого компонента. Я буду использовать только одну анимацию для всех из них.
В качестве примера, давайте использовать компонент <Home> .
Сначала нам нужно импортировать CSSTransitionGroup .
import { CSSTransitionGroup } from 'react-transition-group'
Тогда вам нужно обернуть свой контент этим.
Так как мы имеем дело с состоянием монтирования компонента, мы включаем transitionAppear и устанавливаем таймаут для него. Мы также отключаем transitionEnter и transitionLeave , поскольку они действительны только после монтирования компонента. Если вы планируете анимировать дочерние элементы компонента, вы должны их использовать.
Наконец, добавьте конкретное имя transitionName чтобы мы могли ссылаться на него в файле CSS.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
import React from ‘react’
import { CSSTransitionGroup } from ‘react-transition-group’
import ‘../styles/homeStyle.css’
const Home = () =>{
return(
<CSSTransitionGroup
transitionName=»homeTransition»
transitionAppear={true}
transitionAppearTimeout={500}
transitionEnter={false}
transitionLeave={false}>
<div>
Home
</div>
</CSSTransitionGroup>
)
}
export default Home
|
Мы также импортировали файл CSS, где определяем переходы CSS.
|
1
2
3
4
5
6
7
8
|
.homeTransition-appear{
opacity: 0;
}
.homeTransition-appear.homeTransition-appear-active{
opacity: 1;
transition: all .5s ease-in-out;
}
|
Если вы обновите страницу, вы увидите эффект постепенного появления компонента Home .
Если вы примените ту же процедуру ко всем другим перенаправленным компонентам, вы увидите их отдельные анимации, когда вы измените содержимое с помощью вашего Меню.
Вывод
В этом уроке мы рассмотрели модули реагировать-маршрутизатор-дом и реагировать-переход-группа . Однако в обоих модулях есть нечто большее, чем мы рассмотрели в этом руководстве. Вот рабочая демонстрация того, что было покрыто.
Таким образом, чтобы узнать больше функций, всегда изучайте документацию модулей, которые вы используете.
За последние пару лет популярность React возросла. Фактически, у нас есть ряд товаров на рынке, которые доступны для покупки, проверки, реализации и так далее. Если вы ищете дополнительные ресурсы по React, не стесняйтесь проверить их .