React js router. Простой пример роутера на реакте

Йо-йо! JS-фреймворки становятся всё более распространёнными, однако информации на русском языке не множится, никто не хочет ей делиться. Ну что же, придётся мне это сделать и сорвать немного хайпа на популярной теме.

В ноябре 2018 года я принял участие в сообществе haJS в формате frontend weekend. Целью было сравнить различные фрэймворки (React, Vue, Angular). Я выбрал React js из-за того, что хотел его изучить. Через некоторое время я прекратил участие в проекте, но результат моих трудов до сих пор остался на Github. Как раз на примере его кода я буду рассказывать про роутер в реакте.

Установка rect router

Не буду останавливаться на этом долго, скажу только, что я использовал npm. Набираем:

npm install --save react-router-dom

Импорт

Импортируем router в наш компонент. В своём примере я импортировал его только один раз. Пример
https://github.com/Hajsru/fw-front-react/blob/master/src/App.js

Код:

// Импорт самого роутера
// Switch для переключения по роутам
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
// Импорт реакта
// Suspense нужен для того, чтобы управлять html'лем, который будет показан во время загрузки компонента (новой страницы)
// lazy позволяет визуализировать динамически добавленный контент, т.е. не загружать все страницы сразу
import React, {Component, Suspense, lazy } from 'react';

Итак, когда мы всё импортировали, нам нужно обернуть в lazy наши компоненты.

// Список моих компонентов (страниц)
const MainPage = lazy(() => import('./pages/mainPage/pageMain'));
const EventsPage = lazy(() => import('./pages/eventsPage/pageEvents'));
const SpeakersPage = lazy(() => import('./pages/speakersPage/pageSpeakers'));
const ReportsPage = lazy(() => import('./pages/reportsPage/pageReports'));
const RegisterPage = lazy(() => import('./pages/registerPage/pageRegister'));
const DetailPage = lazy(() => import('./pages/detailPage/pageDetail'));

Заметьте, что в lazy мы помещаем стрелочную функцию.

Роуты

Роуты я покажу уже на коде всего компонента. Так будет понятнее и мы сразу разберёмся с Suspense.

class App extends Component {
  render() {

    return (
      <div className="app-container">
        <aside className="app-aside">
          <Header />
          <NavbarAside />
        </aside>
          <Router>

              <Suspense fallback={<div>Loading...</div>}>
                  <Switch>
                      // Роуты 
                      // Path - адрес страницы относительно корня
                      // exact - роут по умолчанию 
                      // component - чистая функция
                      <Route exact path="/" component={ (()=>(<MainPage />)) } />
                      <Route path="/events" component={(()=>(<EventsPage />))} />
                      <Route path="/speakers" component={(()=>(<SpeakersPage/>))} />
                      <Route path='/reports' component={(()=>(<ReportsPage />))} />
                      <Route path='/detail' component={(()=>(<DetailPage/>))} />
                      <Route path='/registration' component={(()=>(<RegisterPage />))} />
                  </Switch>
              </Suspense>
          </Router>
      </div>
    );
  }
}

Пожалуй тут самое важное то, что компонент — это чистая функция. Это может вызвать у некоторых проблемы и вся консоль будет пестрить краснотой. У себя я использовал эту конструкцию:

(()=>(<MainPage />))

Меню и ссылки

Работа Router уже настроена, но если вы теперь будете перемещаться по ссылкам, то вы увидите, что экран моргает, а Suspense не работает.

Для того, чтобы изменить это, нам нужно изменить наше меню. Тут начинается «эксклюзив», я не успел выложить этот код на github проекта.

Вам нужно обернуть ссылки в меню и прочих местах в компонент </Link>, который приходит к нам с роутером

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

class NavbarAside extends Component {
    render(){
        return (
            <nav className="app-nav">
                <ul className="app-nav__list">
                    <li className="app-nav__list-item">
                        <Link to="/events">Митапы</Link>

                    </li>
                    <li className="app-nav__list-item">
						<Link to="/speakers">Спикеры</Link>
                    </li>
                    <li className="app-nav__list-item">
                        <Link to="/reports">Доклады</Link>
                    </li>
                    <li className="app-nav__list-item">
                        <Link to="/detail">Страница доклада</Link>
                    </li>
                    <li className="app-nav__list-item">
                        <Link to="/registration">Регистрация на митап</Link>
                    </li>
                </ul>
            </nav>
        );
    }
}

export default NavbarAside;

Если вы будете следовать вышеперечисленными рекомендациями, то вы быстро усвоите основы react-router-dom

P.S.

Надеюсь моя статья вам будет полезна. Кстати, моя библиотека stickjaw отлично работает с react и вы можете найти её на npm