javascript - link - redireccionar react
Enrutamiento del cliente(usando react-router) y enrutamiento del lado del servidor (2)
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'')
}
})
})
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?
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.