Пример использования на основе работоспособного React приложения
Простой туториал React Router v4 и Сложные примеры
Ниже поэтапное внедрение роутинга в приложение
Принцип действия Router DOM довольно прост.
Различные сущности генерируют различные пути, эти пути отображаются в адресной строке.
Специальные компоненты Router DOM отслеживают адресную строку и если путь совпадёт с
назначенным им - предпримут заданные действия.
Импорт компонента в ./src/index.js
import {BrowserRouter} from 'react-router-dom'
// Обёртывание в компонент
<BrowserRouter>
<App />
</BrowserRouter>
Импорт компонента в ./src/App.js
import {Route} from 'react-router-dom'
//Вывод заголовка при переходе по ссылке
<Route path="/" exact render={() => <h1>Home Page</h1>} />
// Вывод компонента при переходе по ссылке
<Route path="/cars" component={Cars} />
Импорт компонента NavLink в ./src/App.js
import {Route, NavLink} from 'react-router-dom'
<NavLink to= подменяет собой <a href=...
<NavLink to="/cars">Cars</NavLink>
После импорта и применения этих компонентов Router DOM переход по ссылкам пересаёт перезагружать страницу. Рендеринг страницы становится динамическим. И это хорошо 😊
Ссылка в HTML выглядит по-прежнему. У активной ссылки появляется класс .active
<a href="/cars" class="active" aria-current="page">Cars</a>
В файле App.scss добавим стиль для активной ссылки
a.active {
font-weight: bold;
color: red;
}
Без применения параметра exact пути с одинаковым доменом будут считаться одинаковыми и класс .active будет применяться более чем к одной ссылке.
<NavLink to="/cars" exact>Cars</NavLink>
// А так можно задасть специфический класс активной ссылки
<NavLink to="/cars" exact activeClassName={'wfm-active'}>Cars</NavLink>
Инлайн задание стиля для активной ссылки
<NavLink to="/about" exact
activeStyle={ {color: 'blue'} }
>About</NavLink>
Развёрнутое задание пути
<NavLink to={{
pathname: '/cars', // Сам путь, как и прежде
search: '?a=1&B=2',// Эти параметры добавляются к URL
hash: 'wfm-hash' // Например для скролинга к нужному месту на странице
}} exact>Cars</NavLink>
В .\src\Cars\Cars.js обращаемся к полю history данного компонента и таким образом реализуем переход на заглавную страницу
goToHomePage = () => {
this.props.history.push( {pathname: '/' } ) }
// . . .
<button onClick={this.goToHomePage}>Go to Homepage</button>
Функциональный компонент ./src/Cars/Car/Car.js выражен простой функцией
и не несёт в своих props полей связанных с роутингом. Но их можно
передать ему из родителя Cars посредством ...this.props
Для тех же целей есть специальный компонент Router DOM - withRouter
Импортируем и оборачиваем в него.
Благодаря этому у компоненра появляются нужные для роутинга поля.
import {withRouter} from 'react-router-dom'
export default withRouter(Car)
Добавляем генерацию адресной строки в компонент Car Теперь каждый экземпляр карточки автомобиля создаёт определённый путь.
<div className={'Car'}
onClick={()=> props.history.push('/cars/' + props.name.toLowerCase())}
>
Создадим новый компонент ./src/CarDetail/CarDetail.js с простейшим выводом заголовка с названием автомобиля
<h1>{this.props.match.params.name}</h1>
В App.js импортируем новый компонент и настроим маршрут. Вот таким вот образом через :name - это тот же name, что и в строке выше.
import CarDetail from './CarDetail/CarDetail'
<Route path="/cars/:name" exact component={CarDetail} />
Компонент Switch позволяет вместо exact обернуть пути в компонент и обеспечить именно ПЕРЕКЛЮЧЕНИЕ компонентов и отменить их множественный вывод на страницу.
import {Route, NavLink, Switch} from 'react-router-dom'
// . . .
<Switch>
<Route path="/" . . .
<Route path="/cars" component={Cars} />
</Switch>
Добавим путь к ненайденной сранице. Он должен быть последним в блоке
<Route render={()=> <h1 style={{color: 'red', textAlign: 'center'} }>404 not found!!!</h1>} />
То же можно делать с помощью ещё одного компонента
// Это обычный синтаксис "отсюда -> туда"
<Redirect from={'/about'} to={'/cars'} />
// Но в компоненте <Route> можно убрать from= и тогда все дороги будут вести в to=
<Redirect to={'/'} /> // Теперь любае неправильная ссылка ведёт на Homepage
Добавим проверку на наличие флага isLoggedIn в state и теперь, пока он не тру - никакого роута к about не будет, а значит будем попадать на заглавную.
{ this.state.isLoggedIn ? <Route path="/about" component={About} /> : null}
Вот так просто мы можем ограничивать доступ к различным частям приложения. Такого пути просто нет - потому что мы его не создали, потому что условие isLoggedIn - не true