Estoy tratando de configurar la representación del lado del servidor con la versión más reciente de react-router v.4. Seguí este tutorial https://react-router.now.sh/ServerRouter .
Recibo el siguiente error cuando actualizo el navegador: Infracción invariable: React.Children.only esperaba recibir un solo elemento React child.
mi archivo route.jsx :
export default () => <div> <Header /> <Match pattern="/" component={Home} /> <Match pattern="/about" component={About} /> <Miss component={NotFound} /> </div>;y en index.jsx estoy renderizando la aplicación
import BrowserRouter from 'react-router'; import Routes from './routes'; ReactDOM.render(<BrowserRouter> <Routes /> </BrowserRouter>, document.getElementById('app'));Ahora, como servidor, estoy usando express.js . Aquí está mi configuración:
import Routes from '../routes'; server.use((req, res) => { const context = createServerRenderContext(); let markup = renderToString( <ServerRouter location={req.url} context={context} > <Routes /> </ServerRouter>); const result = context.getResult(); if (result.redirect) { res.writeHead(301, { Location: result.redirect.pathname, }); res.end(); } else { if (result.missed) { res.writeHead(404); markup = renderToString( <ServerRouter location={req.url} context={context}> <Routes /> </ServerRouter>); } res.write(markup); res.end(); } });No encontré ningún tutorial para la renderización del servidor con esta versión de rutas de reacción, excepto oficial. ¿Alguien puede ayudarme qué estoy haciendo mal? Gracias.
¡Resuelto!
El primer problema fue que tenía espacios alrededor de la etiqueta <Routes /> .
Solución correcta:
<ServerRouter location={req.url} context={context}><Routes /></ServerRouter>); El segundo problema estaba en la etiqueta <Header /> incluida en el archivo route.jsx.
Tuve el siguiente error (Violación invariable: el tipo de elemento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuve: indefinido. Verifique el método de representación de StatelessComponent )
File Header.jsx contenía la siguiente línea de código:
import Link from 'react-router';Solución correcta: (Olvidé poner corchetes):
import { Link } from 'react-router';El gran problema es que solo se espera que <BrowserRouter> tenga un hijo, por lo que debe envolver sus hijos en un div . Esto se hace para que React Router sea independiente del entorno (no puede representar un div en React Native, por lo que RR espera que incluya el contenedor apropiado).
export default () => <BrowserRouter> <div> <Header /> <Match pattern="/" component={Home} /> <Match pattern="/about" component={About} /> <Miss component={NotFound} /> </div> </BrowserRouter>; Como problema secundario, está incluyendo el <BrowserRouter> en su componente <App> , por lo que se representará en el servidor. No quieres esto. Solo el <ServerRouter> debe representarse en el servidor. Debe mover el <BrowserRouter> más arriba en la jerarquía de componentes del lado del cliente para evitar esto.
// App export default () => <div> <Header /> <Match pattern="/" component={Home} /> <Match pattern="/about" component={About} /> <Miss component={NotFound} /> </div>; // index.js render(( <BrowserRouter> <App /> </BrowserRouter> ), document.getElementById('app'))porque BrowserRouter no existe en react-router , intente instalarlo e importarlo desde react-router-dom