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()}>

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

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

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