<MyRusakov.ru />

Программирование на C# с Нуля до Гуру

Программирование на C# с Нуля до Гуру

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

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

Помимо самого курса Вас ждут ещё 3 бесплатных ценных Бонуса: «Технология Windows Presentation Foundation», «Создание библиотеки классов» и «Правильная работа со справочником».

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

Подписавшись по 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):

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