La diferencia entre el enrutamiento front-end de reacción y el enrutamiento back-end: 1. El enrutamiento front-end se activa a través de la etiqueta Link en "react-router" y el enrutamiento back-end se activa a través de ajax 2. El enrutamiento front-end es; basado en el monitoreo de eventos del navegador, mientras que el enrutamiento de back-end se basa en el protocolo de comunicación http 3. El enrutamiento de front-end puede lograr una representación parcial, mientras que el enrutamiento de back-end puede volver a representar la página completa;
El entorno operativo de este tutorial: sistema Windows 10, versión de reacción 17.0.1, computadora Dell G3.
Mecanismo de enrutamiento de backend
Los estudiantes que conocen el backend saben que el enrutamiento de backend significa que el backend registra la función de enrutamiento de backend en app.js, y el frontend activa la función de devolución de llamada de enrutamiento correspondiente a través de ajax (tome express como ejemplo)
Disparador: ajax
Respuesta: app.get('/router',devolución de llamada)
Principio: basado en el protocolo de comunicación http
//app.jsapp.get('/', (solicitud, respuesta) => { let ret = { "éxito": verdadero, "código": 200, "mensaje": "", "datos": [], } respuesta.enviar(ret)})Mecanismo de enrutamiento frontal
En cuanto al enrutamiento de front-end (refiriéndose a reaccionar-enrutador), el front-end registra el enrutamiento de front-end y el mapeo de componentes en router.js, y el front-end provoca la representación de componentes a través de la ruta establecida por Link o ingresando el ruta correspondiente en el navegador:
Desencadenador: etiqueta de enlace en reaccionar-router
Respuesta: Represente el componente correspondiente en la etiqueta Rout
Principio: basado en hash en el navegador (antes de React-Router v2), historial (React-Router v4)
//index.jsclass ListContent extiende Componente { constructor(props){ super(props); this.state = { } } render() { return ( <Fila> <Botón>+ <Enlace a="/topic"> Publicar tema </Link> </Button> </Row> }}//router.js<Router> <div> <Header/> <Switch> <Ruta ruta exacta="/" componente={index} /> < Ruta ruta exacta="/topic" componente={topic} /> </Switch> </div></Router>En router.js, el componente de encabezado siempre existirá en la página, mientras que los componentes en la etiqueta Switch solo se representarán después de activarse. Se puede entender simplemente que los componentes no activados son nulos y no se mostrarán.
Por lo tanto, se forma la representación local.
//Si se activa el enrutamiento de front-end '/topic', el componente de índice no representará <Router> <div> <Header/> <Switch> <Ruta ruta exacta="/" componente={null} /> < Ruta ruta exacta=" /topic" componente={topic} /> </Switch> </div></Router>La diferencia entre enrutamiento front-end y enrutamiento back-end
El enrutamiento front-end se basa en el monitoreo de eventos del navegador y no pasa el protocolo de comunicación http.
El enrutamiento de front-end renderiza parcialmente y el back-end vuelve a renderizar la página completa. En términos relativos, la experiencia de enrutamiento de front-end es mejor.