javascript - link - redireccionar react

Enrutamiento del cliente(usando react-router) y enrutamiento del lado del servidor

Question

He estado pensando y estoy confundido con el enrutamiento entre Cliente y Servidor. Supongamos que uso ReactJS para la representación del lado del servidor antes de enviar la solicitud de vuelta al navegador web, y uso el enrutador de reacción como un enrutamiento del lado del cliente para cambiar de página sin actualizar como SPA.

Lo que viene a la mente es:

• ¿Cómo se interpretan las rutas? Por ejemplo, una solicitud desde la página de inicio ( /home ) a la página de /posts ( /posts )
• ¿A dónde va el enrutamiento, en el lado del servidor o en el cliente?
• ¿Cómo sabe cómo se procesa?

Answer 1

Con 1.0, React-Router depende del módulo de history como una dependencia de igual. Este módulo se ocupa del enrutamiento en el navegador. De forma predeterminada, React-Router usa la API de historial HTML5 ( pushState , replaceState ), pero puede configurarlo para usar el enrutamiento basado en hash (consulte a continuación)

El manejo de la ruta ahora se realiza detrás de escena y ReactRouter envía nuevos accesorios a los manejadores de ruta cuando la ruta cambia. El enrutador tiene una nueva devolución de llamada de onUpdate cada vez que cambia una ruta, útil para el seguimiento de visitas a la página o para actualizar el <title> , por ejemplo.

Cliente (enrutamiento HTML5)

import {Router} from ''react-router''
import routes from ''./routes''
var el = document.getElementById(''root'')
function track(){
// ...
}
// routes can be children
render(<Router onUpdate={track}>{routes}</Router>, el)

Cliente (enrutamiento basado en hash)

import {Router} from ''react-router''
import {createHashHistory} from ''history''
import routes from ''./routes''
var el = document.getElementById(''root'')
var history = createHashHistory()
// or routes can be a prop
render(<Router routes={routes} history={history}></Router>, el)

Servidor

En el servidor, podemos usar ReactRouter.match , esto se toma de la guía de representación del servidor

import { renderToString } from ''react-dom/server''
import { match, RoutingContext } from ''react-router''
import routes from ''./routes''
app.get(''*'', function(req, res) {
// Note that req.url here should be the full URL path from
// the original request, including the query string.
match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
if (error) {
res.status(500).send(error.message)
} else if (redirectLocation) {
res.redirect(302, redirectLocation.pathname + redirectLocation.search)
} else if (renderProps) {
res.status(200).send(renderToString(<RoutingContext {...renderProps} />))
} else {
res.status(404).send(''Not found'')
}
})
})

Answer 2

Tenga en cuenta que esta respuesta cubre la versión 0.13.x de React Router: parece que la próxima versión 1.0 tendrá detalles de implementación significativamente diferentes

Servidor

Este es un server.js mínimo con react-router:

var express = require(''express'')
var React = require(''react'')
var Router = require(''react-router'')
var routes = require(''./routes'')
var app = express()
// ...express config...
app.use(function(req, res, next) {
var router = Router.create({location: req.url, routes: routes})
router.run(function(Handler, state) {
var html = React.renderToString(<Handler/>)
return res.render(''react_page'', {html: html})
})
})

Donde el módulo de routes exporta una lista de rutas:

var React = require(''react'')
var {DefaultRoute, NotFoundRoute, Route} = require(''react-router'')
module.exports = [
<Route path="/" handler={require(''./components/App'')}>
{/* ... */}
</Route>
]

Cada vez que se realiza una solicitud al servidor, se crea una instancia de Router un solo uso configurada con la URL entrante como su ubicación estática, que se resuelve en el árbol de rutas para configurar las rutas coincidentes apropiadas, llamando de nuevo con la parte superior controlador de ruta de nivel que se representará y un registro de las rutas secundarias coincidentes en cada nivel. Esto es lo que se consulta cuando se usa el componente <RouteHandler> dentro de un componente de manejo de ruta para representar una ruta secundaria que coincidió.

Si el usuario tiene JavaScript desactivado, o se está cargando lentamente, cualquier enlace en el que haga clic volverá al servidor, lo que se resuelve nuevamente como se indicó anteriormente.

Cliente

Este es un client.js mínimo con react-router (reutilizando el mismo módulo de rutas):

var React = require(''react'')
var Router = require(''react-router'')
var routes = require(''./routes'')
Router.run(routes, Router.HistoryLocation, function(Handler, state) {
React.render(<Handler/>, document.body)
})

Cuando llama a Router.run() , crea una instancia de Router para usted detrás de escena, que se reutiliza cada vez que navega por la aplicación, ya que la URL puede ser dinámica en el cliente, a diferencia del servidor donde Una sola solicitud tiene una URL fija.

En este caso, estamos utilizando HistoryLocation , que utiliza la API de History para asegurarse de que suceda lo correcto cuando presiona el botón Atrás / Adelante. También hay un HashLocation que cambia el hash la URL para hacer entradas en el historial y escucha el evento window.onhashchange para activar la navegación.

Cuando usa el componente <Link> react-router, le da un prop a que es el nombre de una ruta, más cualquier params y datos de query que la ruta necesite. El <a> representado por este componente tiene un controlador onClick que finalmente llama a router.transitionTo() en la instancia del enrutador con los accesorios que le dio el enlace, que se ve así:

 /**
* Transitions to the URL specified in the arguments by pushing
* a new URL onto the history stack.
*/
transitionTo: function (to, params, query) {
var path = this.makePath(to, params, query);
if (pendingTransition) {
// Replace so pending location does not stay in history.
location.replace(path);
} else {
location.push(path);
}
},

Para un enlace regular, esto finalmente llama a location.push() en cualquier tipo de ubicación que esté utilizando, que maneja los detalles de la configuración del historial para que la navegación con los botones de retroceso y avance funcione, luego vuelve a router.handleLocationChange() al router.handleLocationChange() para informe al enrutador que puede continuar con la transición a la nueva ruta URL.

Luego, el enrutador llama a su propio método router.dispatch() con la nueva URL, que maneja los detalles para determinar cuál de las rutas configuradas coincide con la URL, luego llama a todos los ganchos de transición presentes para las rutas coincidentes. Puede implementar estos ganchos de transición en cualquiera de sus controladores de ruta para tomar alguna acción cuando una ruta está a punto de ser alejada o navegada, con la capacidad de abortar la transición si las cosas no son de su agrado.

Si no se Router.run() la transición, el paso final es llamar a la devolución de llamada que le dio a Router.run() con el componente controlador de nivel superior y un objeto de estado con todos los detalles de la URL y las rutas coincidentes. El componente del controlador de nivel superior es en realidad la instancia del Router sí, que maneja la representación del controlador de ruta más superior que coincidió.

El proceso anterior se vuelve a ejecutar cada vez que navega a una nueva URL en el cliente.

Proyectos de ejemplo

• Reaccionar enrutador Mega Demo
• Laboratorio Isomorfo