Миграция MPA в Piral может быть выполнена несколькими способами.
- Создание оболочки обертки, которая предоставляет доступ к разным SSR-частям с помощью iframes
- Создание оболочки обертки, которая предоставляет доступ различные части SSR через фрагменты, которые динамически получаются
- Преобразование ваших видов Razor в части React и разделение между FE / BE; положить детали React в коробку
Я не знаю, насколько сложным является ваше приложение, но, возможно, (1) будет проще всего начать работу (особенно если это, например, всего одна страница ).
Давайте посмотрим, как можно реализовать (2):
import * as React from 'react';
export function setup(app) {
const connect = app.createConnector(() => fetch('https://myexample.com/home').then(res => res.text()));
app.registerPage('/myexample', connect(({ data }) => {
const __html = data;
return <div dangerouslySetInnerHTML={{ __html }} />;
}));
}
Здесь мы лениво загружаем содержимое из https://myexample.com/home и отображаем его в компоненте (который будет страницей) .
Есть пара вещей, на которые следует обратить внимание:
- В лучшем случае найдите
fetch (или отправьте специальный заголовок) и только return фрагмент вместо полного ответа - Если нужны таблицы стилей, либо «fi sh» их из ответа, либо интегрируйте их заранее (см. следующий пункт)
- Код выше не имеет специальной обработки SPA-ссылок. Таким образом, все ссылки относятся к заданному URL-адресу страницы, и они выполняют полный переход ...
- JavaScript не будет загружен / не работает в данном решении
Теперь относительно таблицу стилей, которую вы могли бы сделать (среди прочего):
import './my-style.css';
import * as React from 'react';
export function setup(app) {
// ...
}
, где my-style.css выглядит так:
@import url(https://myexample.com/css/site.css);
У нас могло бы быть больше URL и т. д. c. здесь, но я оставляю это нарочно. Имейте в виду, что ранее показанный способ может привести к столкновениям. Так что либо «загрузите» лист заранее и добавьте к нему префикс («область действия»), либо используйте все это в теневом решении DOM (теневой DOM всегда «свободен» от стиля родительского DOM и должен импортировать свои собственные таблицы стилей).
Для обработки ссылок, что вы можете сделать: использовать эффект макета, получить все элементы a с помощью селектора, прикрепить событие и отменить исходную навигацию. Вместо этого используйте контекст history.
В коде это выглядит примерно так:
import * as React from 'react';
import { useHistory } from 'react-router';
export function setup(app) {
const connect = app.createConnector(() => fetch('https://myexample.com/home').then(res => res.text()));
app.registerPage('/myexample', connect(({ data }) => {
const __html = data;
const container = React.useRef();
const history = useHistory();
React.useLayoutEffect(() => {
if (container.current) {
const anchors = container.current.querySelectorAll('a[href]');
Array.prototype.forEach.call(anchors, anchor => {
anchor.addEventListener('click', ev => {
ev.preventDefault();
history.push(anchor.getAttribute('href'));
});
});
}
}, []);
return <div dangerouslySetInnerHTML={{ __html }} ref={container} />;
}));
}