Solución:
Actualmente, estoy haciendo algo similar.
La aplicación no es una aplicación React completa, estoy usando React para cosas dinámicas, como CommentBox, que es autark. Y se puede incluir en cualquier Punto con parámetros especiales.
Sin embargo, todas mis aplicaciones secundarias se cargan e incluyen en un solo archivo all.js, por lo que el navegador puede almacenarlo en caché en todas las páginas.
Cuando necesito incluir una aplicación en las plantillas SSR, solo tengo que incluir un DIV con la clase “__react-root” y una ID especial (el nombre de la aplicación React que se va a renderizar)
La lógica es realmente simple:
import CommentBox from './apps/CommentBox';
import OtherApp from './apps/OtherApp';
const APPS = {
CommentBox,
OtherApp
};
function renderAppInElement(el) {
var App = APPS[el.id];
if (!App) return;
// get props from elements data attribute, like the post_id
const props = Object.assign({}, el.dataset);
ReactDOM.render(<App {...props} />, el);
}
document
.querySelectorAll('.__react-root')
.forEach(renderAppInElement)
<div>Some Article</div>
<div id="CommentBox" data-post_id="10" class="__react-root"></div>
<script src="https://foroayuda.es/all.js"></script>
Editar
Dado que el paquete web admite perfectamente la división de código y LazyLoading, pensé que tenía sentido incluir un ejemplo en el que no necesita cargar todas sus aplicaciones en un paquete, sino dividirlas y cargarlas a pedido.
import React from 'react';
import ReactDOM from 'react-dom';
const apps = {
'One': () => import('./One'),
'Two': () => import('./Two'),
}
const renderAppInElement = (el) => {
if (apps[el.id]) {
apps[el.id]().then((App) => {
ReactDOM.render(<App {...el.dataset} />, el);
});
}
}
Puede proporcionar varios puntos de entrada para la aplicación en el archivo webpack.config.js:
var config = {
entry: {
home: path.resolve(__dirname, './src/main'),
page1: path.resolve(__dirname, './src/page1'),
page2: path.resolve(__dirname, './src/page2'),
vendors: ['react']
},
output: {
path: path.join(__dirname, 'js'),
filename: '[name].bundle.js',
chunkFilename: '[id].chunk.js'
},
}
entonces puede tener en su carpeta src tres archivos html diferentes con sus respectivos archivos js (ejemplo para la página 1):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 1</title>
</head>
<body>
<div id="app"></div>
<script src="https://foroayuda.es/./vendors.js"></script>
<script src="./page1.bundle.js"></script>
</body>
</html>
Archivo JavaScript:
import React from 'react'
import ReactDom from 'react-dom'
import App from './components/App'
import ComponentA from './components/ReactComponentA'
ReactDom.render(<div>
<App title="page1" />
<ReactComponentA/>
</div>, document.getElementById('app'))
A continuación, se pueden cargar diferentes componentes de React para cada página.
Estoy construyendo una aplicación desde cero y voy aprendiendo sobre la marcha, pero creo que lo que estás buscando es React-Router. React-Router asigna sus componentes a URL específicas. Por ejemplo:
render((
<Router>
<Route path="https://foroayuda.es/" component={App}>
<Route path="api/animals" component={Animals}>
<Route path="birds" component={Birds}/>
<Route path="cats" component={Cats}/>
</Route>
</Route>
<Route path="api/search:term" component={AnimalSearchBox}>
</Router>
), document.body)
En el caso de búsqueda, se puede acceder a ‘término’ como una propiedad en AnimalSearchBox:
componentDidMount() {
// from the path `/api/search/:term`
const term = this.props.params.term
}
Pruébalo. Este tutorial es el que me puso en la cima en términos de mi comprensión de este y otros temas relacionados.
A continuación, la respuesta original:
Encontré mi camino aquí buscando la misma respuesta. Mira si esta publicación te inspira. Si su aplicación es como la mía, tendrá áreas que cambian muy poco y varían solo en el cuerpo principal. Puede crear un widget cuya responsabilidad sea representar un widget diferente según el estado de la aplicación. Usando una arquitectura de flujo, puede enviar una acción de navegación que cambie el estado en el que cambia el widget de su cuerpo, actualizando de manera efectiva solo el cuerpo de la página.
Ese es el enfoque que estoy intentando ahora.