React подключение к рутовому

С чего начать?

Для подключения реакт проекта к рутовому необходим react версии не ниже 16.8 и react-router-dom версии не ниже 5. Если ваши версии ниже текущих то самое время обновиться. Так же для роутинга необходимо использованить либу именно react-router-dom, даже если у вас лишь 1 роут, её всё равно необходимо установить и подключить роутинг.

Что нужно добавить в проект, чтобы подключить к рутовому?

Мы сделали библиотеку - помощник, в которой есть всё необходимое, она лежит в нексусе компании, поэтому не забудьте прописать пути в файле .npmrc до него, который находится в корне проекта.

Пример файла:

registry=http://frontnexus.diasoft.ru:8081/repository/npm-all-group/
always-auth=true
_auth='пароль'

Для того, чтобы скачать библиотеку, выполните в терминале в корне проекта команду npm i @diasoft/qpalette-react-wrapper

После установки, преобразуйте ваш файл с роутингом в такой вид:

import {useEffect} from 'react';
import {BrowserRouter, Route, Routes, useLocation, useNavigate} from 'react-router-dom';
import {QpaletteWebComponent, QRootEventsServiceInstance, RoutesWrapper} from '@diasoft/qpalette-react-wrapper';
 
// Ваш главный файл с роутингом
const Index = () => {
  return (
    // добавляем basename из библиотеки
    <BrowserRouter basename={QRootEventsServiceInstance.getBasename()}>
      {/* добавляем обёртку над роутингом, если reactRouterDom v5, используйте useHistory вместо useNavigate   */}
    <RoutesWrapper useEffect={useEffect} useNavigate={useNavigate} useLocation={useLocation}>
      {/* ваши роутеры*/}
    </RoutesWrapper>
  </BrowserRouter>
  )
}
// обёрткой оборачиваем файл
QpaletteWebComponent(<Index/>, ReactDOM);

После этого, при сборке, ваш проект превратится в вебкомпонент, с динамичиским роутингом.

Для локальной разработки, рекомендуется подключать проект через прокси в рутовое. Добавить прокси - кнопка в рутовом приложении, слева - снизу.

Для того чтобы webpack пересобирал быстро, необходимо добавить в него для дев среды:

optimization: {
  runtimeChunk: false,
},

Если вы всётаки хотите как и раньше разрабатывать локально, без рутового, тогда необходимо поставить условия на роутинг и меин файл, на переменные среды окружения - development/production.

Пример для меин файла:

export const isDevelopment = process.env.NODE_ENV === 'development';
 
isDevelopment ? Ваш вариант : QpaletteWebComponent(<App />, ReactDOM);

Пример для роутинга:

<Router basename={isDevelopment ? '/' : QRootEventsServiceInstance.getBasename()}>

Адреса собственных ассетов

Рутовое приложение отдаёт свои файлы от корня сайта, а веб-компонент — от собственного адреса вида /api/<сервис>/<компонент>/. Поэтому путь assets/…, записанный в коде, браузер всегда отсчитывает от корня сайта — то есть от ассетов рутового приложения, а не вашей сборки.

QAssetsServiceInstance из @diasoft/qpalette-react-wrapper строит адреса файлов вашей сборки сам:

import { QAssetsServiceInstance } from '@diasoft/qpalette-react-wrapper';
 
// → /api/<сервис>/<компонент>/assets/data/reference.json
const referenceUrl = QAssetsServiceInstance.url('data/reference.json');

Правило одно для сервиса и компонентов — то же, что у Angular-компонентов (Адреса собственных ассетов):

• путь без ведущего assets/ (data/reference.json) — файл в ассетах вашей сборки;
• assets/… и ./assets/… — как есть: браузер отсчитает от корня сайта, то есть от ассетов рутового приложения, как и до 8.2.0;
• путь от корня сайта (/assets/…), полный URL, data: и blob: — как есть;
• метод baseUrl() возвращает сам адрес, от которого отдаётся ваша сборка; у виджета это каталог его бандла (…/widgets/<name>/).

Адрес определяется по файлу сборки, которым рутовое приложение подключило компонент, поэтому дополнительных настроек не требуется. Компоненты QBanner (picture), QProductCard (img) и QPlateComponent (url) из @diasoft/qpalette-visual-react разворачивают такие пути сами — картинку достаточно положить в свои ассеты и написать picture="banner.jpg".

Так работает с версии 8.2.0 обоих пакетов: @diasoft/qpalette-react-wrapper и @diasoft/qpalette-visual-react публикуются одной версией, и поднимать нужно оба. На более ранних версиях путь без assets/ в <img> браузер отсчитает от корня сайта — там передавайте полный адрес от корня, /api/<сервис>/<компонент>/assets/… (Адрес вручную: версии до 8.2.0).

Как сделать быстрый старт?

Использование дизайнера интерфейсов

Для вас мы реализовали дизайнер интерфейсов (opens in a new tab), с помощью которого можно сгенерировать полноценный реакт проект.