Добавление внешней маршрутизации в ядро технологического стека на 2019 год.
Это одна из статей, которые добавляют дополнительные функциональные возможности во интерфейсные и серверные приложения, разработанные в статье Tech Stack 2019: Core.
Окончательный результат этой статьи доступен в ветви frontend-routing репозитория tech-stack-2019-frontend (TODO). Бэкэнд не изменился по сравнению с основной статьей tech-stack-2019-backend .
Что и почему
По мере роста сложности внешнего интерфейса приложения, несомненно, начнут менять экраны (или их части), чтобы открывать дополнительные функции (также известные как навигация). Хотя это относительно легко сделать с помощью всего лишь React, существует ряд преимуществ использования сторонней библиотеки React Router для навигации.
- Поскольку React Router является зрелым, многие люди с ним знакомы.
- Кроме того, благодаря своей зрелости он имеет большое количество функций.
- Его синтаксис декларативен; это легко понять
- Можно легко использовать функцию навигации из любого места приложения, даже из глубоко вложенных компонентов.
- В качестве бонуса он поддерживает изменение местоположения браузера; включение прямых ссылок в приложение
Пример
На простом примере с двумя экранами мы исследуем некоторые ключевые особенности React Router.
Сначала устанавливаем React Router:
npm install react-router-dom npm install @types/react-router-dom
Кроме того, нам необходимо обновить webpack.config.js, чтобы разрешить webpack-dev-server поддерживать изменение местоположения браузера.
...
module.exports = (env) => ({
...
devServer: {
...
historyApiFallback: true,
},
}
...
Затем мы меняем вверх (src / components / App.tsx) для маршрутизации между двумя экранами (компоненты Home и Hello); по умолчанию используется Домашняя страница, если совпадений нет.
Компонент Home (src / components / Home.tsx) - это простой функциональный компонент без сохранения состояния.
Hello, (src / components / Hello.tsx), по сути, то, что было предыдущим компонентом App; получает Hello API:
Компонент Nav (src / components / Nav.tsx) использует компонент React Router Link для создания a тег, ссылающийся на URL. Однако под капотом React Router перехватывает навигацию браузера и, скорее, использует свою логику маршрутизации для монтирования / размонтирования компонентов.
Иногда, например, чтобы вернуться назад, необходимо получить прямой доступ к объекту history для функций навигации. Хотя объект history предоставляется в качестве свойства для компонентов, передаваемых в команду Route, его нужно будет тщательно детализировать (передать вниз по цепочке компонентов). вложенные дети.
Или лучше использовать компонент более высокого порядка React Router withRouter для передачи объекта истории в обернутый компонент, как это сделано в компоненте Back (src / components / Back / index.ts).
Будучи упакованным, компонент BackView (src / components / Back / BackView.tsx) использует предоставленный объект истории для перехода назад.
Мы применили одну тонкую концепцию TypeScript и React, которая заслуживает некоторого внимания, - это запись PureComponent ‹RouteComponentProps›.
В JavaScript и React мы используем систему проверки типов во время выполнения, PropTypes, для проверки свойств компонента. Однако с помощью TypeScript мы можем выполнить ту же проверку во время компиляции (и с правильно настроенным редактором во время редактирования).
React использует универсальные шаблоны TypeScript для проверки этого типа; в этом случае мы используем интерфейс React Router RouteComponentProps. Проблема, однако, в том, что часто эти функции TypeScript плохо документированы, например как узнать о RouteComponentProps?
К счастью, сообщения об ошибках компилятора TypeScript дают подсказку о необходимом типе; в этом случае передается компоненту более высокого порядка withRouter параметр (другой компонент) без надлежащего определения свойств.
Подведение итогов
Это одна из ряда дополнительных функций, которые мы добавим к основным серверным и интерфейсным решениям. Если вы заинтересованы в получении обновлений, рекомендую подписаться на меня.
