Введение в маршрутизатор React | Кодементор
Реактивный маршрутизатор — это сторонняя библиотека, созданная для решения проблемы маршрутизации в приложении React. Он охватывает API истории браузера и поддерживает синхронизацию пользовательского интерфейса приложения React с URL-адресом браузера.
Существует два пакета React Router: react-router-dom для реакции и react-router-native для React Native. Поскольку вы изучаете создание веб-приложений, вам нужно только установить react-router-dom:
npm install react-router-dom
Есть 3 основных компонента React Router, которые обычно используются в минимальной навигации: BrowserRouter, Route а также Link. Давайте узнаем о BrowserRouter а также Route первый:
import { BrowserRouter as Router, Route } from 'react-router-dom'
class RouterNavigationSample extends React.Component {
render() {
return (
<Router>
<>
<NavigationComponent />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</>
</Router>
)
}
}
BrowserRouterкоторый импортируется как Router, действует как родительский компонент, который обертывает весь ваш компонент React. Он перехватит URL-адрес запроса браузера и сопоставит его путь с соответствующим Route составная часть. Итак, если URL-адрес браузера localhost:3000/about, Router будет принимать эту информацию, а затем искать Route компонент, который имеет path атрибут /about.
Вы определите, что будет отображаться, добавив component приписывать Route.
В примере выше exact атрибут добавлен к стандартному Route дорожка (/), так как без него любой маршрут с / также будет отображать Home компонент, вызывающий несоответствия в навигации.
Третий компонент Link используется для навигации, заменяя обычную <a> тег HTML. Это связано с тем, что обычный тег привязки HTML будет выполнять полное обновление браузера при нажатии, что не подходит для приложения React. Приложению React нужно только обновить URL-адрес, историю браузера и компонент, отображаемый без обновления браузера:
import { Link } from "react-router-dom";
class NavigationComponent extends React.Component {
render() {
return (
<>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About page</Link>
</li>
</ul>
<hr />
</>
);
}
}
Вы можете попробовать рабочую демоверсию здесь.
Обратите внимание, как вы можете использовать кнопку «предыдущая» и «следующая» на панели навигации браузера, а URL-адрес обновляется при последующей навигации без загрузки браузера. Это сила React Router в действии.
Делаем динамическую маршрутизацию
Вы видели, как создать простую навигацию с помощью React Router, но большинству веб-приложений требуются более сложные функции. Вам, вероятно, нужна динамическая маршрутизация, где вы можете поместить что-то вроде /user/:idв котором React должен отобразить что-то на основе значения :id.
Старые ссылки также могут быть мертвыми, и их необходимо перенаправить на новую ссылку.
Кроме того, если URL-адрес браузера не соответствует ни одному существующему маршруту, вам необходимо отобразить страницу 404.
Вот почему вам нужно узнать еще о 2 компонентах, Switch а также Redirect. Switch это уникальный компонент, который будет отображать первое совпадение Route, затем остановитесь. Чтобы проиллюстрировать этот пример:
import { Route } from 'react-router'
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>
В приведенном выше коде URL-адрес браузера /about будет соответствовать всем трем маршрутам, в результате чего все они будут отображаться и располагаться друг под другом. Теперь с помощью Switch компонент, React Router будет отображать About маршрут компонента, а затем остановитесь.
import {Switch, Route} from 'react-router';
<Switch>
<Route path='/about' component={About} />
<Route path='/:user' component={User} />
<Route component={NoMatch} />
</Switch>;
Порядок Route компонент внутри Switch важно, поэтому убедитесь, что вы сначала объявили все статические маршруты, прежде чем объявлять маршруты с параметром url и маршрутом 404.
Теперь для Redirect, компонент довольно простой. Вам нужно только добавить from атрибут, который указывает старый URL и to атрибут, указывающий новый URL-адрес для ссылки.
import {Redirect} from 'react-router';
<Redirect from='/old-match' to='/will-match' />;
Вложенный маршрут
Чтобы создать вложенный маршрут, вам нужно объявить другой Route внутри родительского компонента. Например, допустим, у вас есть /users маршрут, который рендерится на компонент Users.
Давайте сделаем небольшое упражнение. Сначала создайте массив объектов, в которых хранятся пользовательские данные, подойдет следующее:
const users = [
{
id: '1',
name: 'Nathan',
role: 'Web Developer',
},
{
id: '2',
name: 'Johnson',
role: 'React Developer',
},
{
id: '3',
name: 'Alex',
role: 'Ruby Developer',
},
];
Теперь создадим простую маршрутизацию в приложении:
class RouterNavigationSample extends React.Component {
render() {
return (
<Router>
<>
<NavigationComponent />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/users" component={Users} />
</>
</Router>
);
}
}
NavigationComponent — это место, где вы пишете Link Компонент для навигации по приложению:
class NavigationComponent extends React.Component {
render() {
return (
<>
<ul>
<li>
<Link to='/'>Home</Link>
</li>
<li>
<Link to='/about'>About page</Link>
</li>
<li>
<Link to='/users'>Users page</Link>
</li>
</ul>
<hr />
</>
);
}
}
Пришло время создать компоненты для рендеринга на определенных маршрутах. Home а также About компонент будет отображать один div, а Users будет еще один Link а также Route составная часть.
Внутри компонента «Пользователи» вы отобразите список пользователей с вложенный маршрут отдельному пользователю по его идентификатору, например /users/:id:
const Home = () => {
return <div>This is the home page</div>;
};
const About = () => {
return <div>This is the about page</div>;
};
const Users = () => {
return (
<>
<ul>
{users.map(({name, id}) => (
<li key={id}>
<Link to={`/users/${id}`}>{name}</Link>
</li>
))}
</ul>
<Route path='/users/:id' component={User} />
<hr />
</>
);
};
В этом коде нет ничего нового. Таким образом, вы можете написать User компонент сейчас:
const User = ({match}) => {
const user = users.find((user) => user.id === match.params.id);
return (
<div>
Hello! I'm {user.name} and I'm a {user.role}
</div>
);
};
А вот и кое-что новое, о чем я вам не рассказывал. Каждый раз, когда компонент отображается на определенном маршруте, компонент получает реквизиты маршрута от React Router. В компонент передаются 3 реквизита маршрута: match, location, history.
Вы можете посмотреть реквизиты, открыв инструменты разработчика React и выделив соответствующий маршрут компонента:
(Если вы открываете из Codesandbox, вы можете открыть демонстрацию в новом отдельном окне, чтобы включить React DevTool)
Обратите внимание, как вы добавляете /:id параметр URL в Users вложенный маршрут компонента. Этот идентификатор передается User компонента через match.params.id свойство объекта. Если вы передали параметр URL как /:userIdон будет передан как match.params.userId.
Теперь, когда вы знаете о свойствах маршрута, давайте проведем рефакторинг. Users компонент немного:
const Users = ({ match }) => {
return (
<>
<ul>
{users.map(({ name, id }) => (
<li key={id}>
<Link to={`${match.url}/${id}`}>{name}</Link>
</li>
))}
</ul>
<Route path={`${match.url}/:id`} component={User} />
<hr />
</>
);
}
Как всегда, здесь является рабочей демонстрацией.
Передача реквизита компоненту Route
Вы можете подумать, что передача props в компонент Route аналогична передаче в обычный компонент:
<Route path="/about" component={About} user='Jelly'/>
К сожалению, React Router не пересылает реквизиты, введенные в Route компонент в component props, поэтому вам придется использовать другой метод.
К счастью, React Router предоставляет оказывать атрибут, который принимает функцию для вызова при совпадении URL-адресов. Этот реквизит также получает то же самое route props как component реквизит:
<Route
path="/about"
render={props => <About {...props} admin="Bean" />}
/>
const About = props => {
return <div>This is the about page {props.admin}</div>;
};
Сначала вы берете данный props из React Router и передать его в компонент, чтобы компонент мог использовать match, location или же history реквизит при необходимости. Затем вы добавляете в него свои собственные дополнительные реквизиты. В приведенном выше примере используется произвольный admin реквизит как пример.
Вы можете увидеть полный код здесь.
Теперь, когда вы узнали о React Router, попробуйте реализовать его для своего приложения React!
