Análisis del principio de React-Router

Análisis del principio de React-Router

Uno o dos modos: hash e historial

Antes de que saliera la API historyAPI de HTML5, el enrutamiento de front-end se implementó a través de hash ('#'), el servidor no analizará el '#' en la ruta, pero js se puede window.location.hashleer, cuando el valor hash cambia, el hash es leer Valor para que coincida con el componente para renderizar

History es una nueva API en HTML5. Se utiliza para manipular el historial de sesiones del navegador. La forma de expresión es la misma que la ruta original, en lugar de usar '#' pero usar '/'. Sin embargo, este método requiere que el back-end del servidor tenga un archivo impreso correspondiente a la ruta.

二 、 React-Router

Cuando la URL cambia (activará el hashchangeevento history.popstate, cambiará la URL), se llamará al método history.pushState () para enviar el estado de la ruta a la pila (ambos modos enviarán la nueva información de enrutamiento a la pila, pero uno tiene '#' uno sin '#'), y obtiene el objeto de ubicación al mismo tiempo. A continuación, el método matchRoutes coincidirá con el componente correspondiente al objeto de ubicación en el árbol del componente de ruta y obtendrá el nextState, y finalmente usará this.setState (nextState) en el componente Router para representar el componente correspondiente.

Publicación de blog de referencia: https://www.jianshu.com/p/7044952626bf