Всем привет. В этом уроке мы будем разбираться как сделать роутинг в 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.