#8 React - react-router

poster
В этом уроке мы разберемся, как реализовывать роутинг в React с помощью библиотеки React-router
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

Всем привет. В этом уроке мы будем разбираться как сделать роутинг в react. Самая популярная библиотека для этого - это react-router. Давайте добавим в наше приложение с треками react-router.

Установим пакет react-router

npm i react-router --save

Теперь в файле index.js импортируем Router, Router, hashHistory из react-router.

import { Router, Route, hashHistory } from 'react-router';

Теперь давайте посмотрим на наш render. Если бы у нас не было Provider из redux, то мы бы просто рендерили роутер, но нам нужно, чтобы наш store был доступен, поэтому просто выведем роутер внутри Provider.

ReactDOM.render(
  <Provider store={store}>
    <Router history={hashHistory}>
      <Route path="/" component={App} />
    </Router>
  </Provider>,
  document.getElementById('root')
);

Очень классно, что роутер можно тоже описавать с помощью jsx, так как код выходит очень лаконичным. Здесь мы сказали, что хотим инициализировать роутер и передали ему параметр history, чтобы у нас роутинг работал без бекенда, то есть, чтобы все урлы строились через решетку. И дальше мы добавили новый роут с путем / и компонентом App. То есть, когда мы зайдем теперь на роут / у нас зарендерится App компонент.

Если мы посмотрим в браузер, то увидим, что урл выглядит /#/. То есть реакт роутер нормально применился. Наш компонент App срендерился как обычно и приложение работает, наш store из redux прокидывается по компонентам и ничего не поломалось.

Давайте добавим еще один роут.

<Route path="/about" component={About}/>

И создадим компонент About.

import React, { Component } from 'react';

class About extends Component {
  render() {
    return <div>This is our cool music app</div>;
  }
}

export default About;

И импортируем его в index.js

import About from './About';

Теперь если мы в браузере перейдем на урл /#/about, то мы видим, что у нас отрендерился компонент about.

Как же рендерить ссылки для перехода между разными урлами? Для этого у react-router есть замечательная компонента Link.

Давайте добавим компонент меню в наше приложение.

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

class Menu extends Component {
  render() {
    return (
      <div>
        <Link to="/">Tracks</Link>
        <Link to="/about">About</Link>
      </div>
    );
  }
}

export default Menu;

Мы использовали компонент Link из react-router, в котором указали параметр to. Он указывает куда должна переходить ссылка. Теперь зарендерим этот компонент в App и About компонентах.

import Menu from './Menu';
<Menu />

Как мы видим, у нас работают переходы между страницами tracks и about.

Итак, в этом уроке мы с вами реализовали переходы между страницами в react приложении с помощью react-router.

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Olga Matosova
2 лет назад
Добрый день! У вас суперский курс! Но так как на сегодняшний день реакт сильно обновился, hashHistory уже не актуален. А с текущим HashRouter есть проблемы с пониманием. Возможно вы можете подсказать. При вот таком коде: <HashRouter hashType="slash"> <Routes> <Route exact path='/' element={<App />} /> <Route exact path='/about' element={<About />} /> </Routes> </HashRouter> Url основной страницы все равно выглядит без хештега http://localhost:3000/, хотя http://localhost:3000/#/about работает коректно. Пробовала использовать basename но тогда выдает ошибку router.ts:11 <Router basename="/#"> is not able to match the URL "/" because it does not start with the basename, so the <Router> won't render anything. и как заставить при загрузке сразу отображать линку с хештегом не нашла инфы.
Egor Suzanovich
5 лет назад
Добрый день! чтобы избавиться от решетки в урле вместо hashHistory использовал browserHistory. Но в таком случае если ввести урл и нажать enter страница не загрузится, например localhost:8080/about. Правильно ли я понимаю что hashHistory используется не для продакшн проектов, а на продакшене используют browserHistory и уже на сервере описывают что должно возвращаться по определенным урлам?
monsterlessons
5 лет назад
Добрый день. Вы все правильно написали. На продакшене тоже можете встречаться hashHistory и в этом нет ничего плохого, но большинство проектов все таки делается с browserHistory.
Jekaterina Mys
6 лет назад
привет. а что делать с hashHistory? не находит...react-router 4.2.0 у меня.
monsterlessons
6 лет назад
Добрый день. Все уроки по react/redux снимались с использованием react-router 3. Если вы хотите, чтобы все работало без проблем, то используйте исходный код, который прилагается к уроку.
Moe Green
6 лет назад
Вот здесь решение - https://github.com/ReactTraining/react-router/issues/4752
Moe Green
6 лет назад
более правильным будет эта ссылка - https://reacttraining.com/react-router/web/guides/quick-start Подскажите, плиз, что означает атрибут exact у Route?
monsterlessons
6 лет назад
Exact означает что роут должен совпадать полностью. Обычно указывают для роута / exact, чтобы он не совпадал со всеми другими роутами.
Лена Чудилова
6 лет назад
Привет! не совсем поняла как появились папки src/reducers, src/actions ?
monsterlessons
6 лет назад
Это был мой фейл. В этом видео без redux все будет работать. Но снимал я в последовательности: React - 1-6 уроки, Redux - 1-3 уроки, React - 7 урок, Redux - 4-8 уроки, React - 8 - 9 уроки. Такая последовательность даст вам полное понимание React + Redux от начала до конца.
Максим Маркелов
7 лет назад
Заранее прошу простить за глупый вопрос. Не совсем понятно нужны ли какие-то дополнительные приготовления и изменения со стороны сервера? Или достаточно подключить сбилденный js?
monsterlessons
7 лет назад
Никаких дополнительных приготовлений не нужно. Просто подключение сбилдженого js, css и должно работать из коробки.
Rustam Apaev
7 лет назад
Я с двумя роутерами недавно работал, в Meteor (FlowRouter) и Vue. ТАм есть такая штука, типа <router-view> которая вставляется в шаблон и отображается в зависимости от роута. <Header /> <router-view /> <Footer /> А в реакте как подобный функционал сделать? Первое что на ум приходит, компонент, где для каждого роута будут разные пропсы (подкомпонентами)...
monsterlessons
7 лет назад
<Route component={Layout}> <Route path="/" component={Home}/> </Route Соответственно Header и Footer отрисовываете в Layout, а для того, чтобы между ними вывести контент страницы используете {props.children}
Karen Kostanyan
7 лет назад
А как работать с cookies?
monsterlessons
7 лет назад
Я обычно использую https://github.com/js-cookie/js-cookie для этого
Karen Kostanyan
7 лет назад
А будет урок по RestAPI, как взаимовоздействие react-router и например nodejs+express RestApi ??
monsterlessons
7 лет назад
Да в платной серии "Пишем интернет магазин на React/Redux", которая выйдет в ближайшее время будет взаимодействие с API. А как писать API на node смотрите тут https://monsterlessons.com/project/series/pishem-api-na-nodejs
Karen Kostanyan
7 лет назад
На node знаю как писать prosto хочу понять в react как работать с API ... простой xmlhttprequest или у реакта есть хорошая библиотека или свои решение ?
monsterlessons
7 лет назад
Обычно используют Redux и асинхронные запросы пишут в екшенах. Например redux-thunk позволяет писать асинхронные экшены.
Karen Kostanyan
7 лет назад
ок спасибо
dk
7 лет назад
Изменили 'react-router' Так работает: import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; <Router > <div> <div> <Link to="/">Tracks</Link> <Link to="/about">About</Link> </div> <Route exact path="/" component={App} /> <Route path="/about" component={About}/> </div> </Router>
monsterlessons
7 лет назад
Либо использовать react-router 3, так как я использовал в уроке именно его.
venik_man
7 лет назад
Тут уже добавлен REDUX. Хотя в этом курсе ты его не описывал. Стоит ли сначало курс с REDUX смотреть или какую последовательность посоветуешь?
monsterlessons
7 лет назад
Это был мой фейл. В этом видео без redux все будет работать. Но снимал я в последовательности: React - 1-6 уроки, Redux - 1-3 уроки, React - 7 урок, Redux - 4-8 уроки, React - 8 - 9 уроки. Такая последовательность даст вам полное понимание React + Redux от начала до конца.
venik_man
7 лет назад
Суппер. Буду рабоать по этому порядку! Спасибо!