<MyRusakov.ru />

Создание игр на Unreal Engine 4

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров. Дополнительно, почти к каждому уроку идут упражнения для закрепления материала.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Библиотека React Router

Библиотека React Router

В данной статье мы рассмотрим с Вами как можно добавить переходы по ссылкам на сайте без перезагрузки страницы. Это особенно актуально для одно страничных приложений, которые, в частности, пишутся на React.

В качестве примера мы будем использовать библиотеку react-router-dom. По своей сути, то, что делает React Router, - это условный рендеринг определенных компонентов для отображения в зависимости от маршрута, используемого в URL-адресе (/ - для домашней страницы, /about - для страницы "О нас" и т. д.).

Итак, для начала поставим необходимые библиотеки, для этого в консоли выполним:


// команда будет выполняться некоторое время
$ npx create-react-app

// затем ставим саму библиотеку маршрутизации
npm install react-router-dom

Теперь непосредственно код компонентов:

В примере я связываю главную страницу с двумя другими "страницами" (которые на самом деле являются просто компонентами) под названием Contacts и About.

Для этого нужно настроить приложение для работы с React Router. Все, что будет визуализировано, должно будет войти в элемент <BrowserRouter>, поэтому сначала оберните свое приложение в данный компонент. Это базовый компонент, который выполняет всю логику отображения различных компонентов, которые вы ему предоставляете.

index.js



import React, { Component } from 'react';
import ReactDOM from 'react-dom';

// импортируем пакеты роутинга
import { BrowserRouter, Route, Switch } from 'react-router-dom';


ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, 
    document.getElementById('root')
)

Затем в компоненте App добавьте элемент Switch. Он гарантируют, что одновременно будет отображаться только один компонент. Если мы не используем его, мы можем по умолчанию использовать компонент Error (страница не найдена), который напишем далее.

App.js


import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';


function App() {
    return (
        <main>
            <Switch>
                
            </Switch>
        </main>
    )
}

Теперь пришло время добавить теги <Route>. Это ссылки между компонентами, которые должны быть помещены внутри тегов <Switch>.

Чтобы указать тегам <Route>, какой компонент следует загрузить, просто добавьте атрибут path и имя компонента, который вы хотите загрузить с помощью атрибута component.


<Route path='/' component={Home} />

На любом сайте есть множестов адресов, начинающихся с "/". Наш роутер в этом случае возьмет любой адрес начинающийся с данного символа, чтобы этого не произошло надо добавить аттрибут exact к тегу Route. После этого мы получим корректное совпадение маршрутов.


import Home from './components/Home';
import About from './components/About';
import Contacts from './components/Contacts';
import Error from './components/Error';


function App() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={Contacts} />
                <Route path="/shop" component={About} />
                <Route component={Error} /> // вызывается, если нет совпадения по маршрутам
            </Switch>
        </main>
    )
}

Теперь, там где нам нужны ссылки (например, в навигации) мы можем добавить следующий компонент:


function Navbar() {
  return (
    <div>
      <Link to="/">Главная</Link>
      <Link to="/about">О Нас</Link>
      <Link to="/contacts">Контакты/Link>
    </div>
  );
};

Таким образом, в браузере будут меняться URL и содержимое страницы, но при этом перезагрузки происходить не будут.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.