La diferencia entre reaccionar-enrutador y reaccionar-enrutador-dom

Reimpreso de: La diferencia entre reaccionar-router y reaccionar-router-dom

react-router-v4Lo llamo " enrutador reactivo de cuarta generación ", ¿ react-routery react-router-domcuál es la diferencia?

¿Por qué a veces vemos el siguiente escrito?

Escribiendo 1

import {Swtich, Route, Router, HashHistory, Link} from 'react-router-dom';

Escribiendo 2

import {Switch, Route, Router} from 'react-router';
import {HashHistory, Link} from 'react-router-dom';

Hablemos brevemente de sus respectivas funciones:

react-router: Realización de la función principal del enrutamiento
react-router-dom: basado en react-router, agregar algunas funciones en el entorno de ejecución del navegador, como: Linkcomponente, que representará una aetiqueta, enlace del código fuente del componente a una línea de etiqueta ;  BrowserRoutery HashRoutercomponente, el primero usa pushStateun popStateevento para crear enrutamiento , este último construye rutas usando window.location.hashy hashchangeeventos.

react-router-native: Basado en react-router, similar a react-router-dom, agregando react-nativealgunas funciones en el entorno operativo.

Desde el nivel fuente para explicar:

Primero react-router-dommire el código fuenteSwitch del componente.

// Written in this round about way for babel-transform-imports
import { Switch } from 'react-router'
export default Switch

react-routerSimplemente importe Switchcomponentes y vuelva a exportarlos.

Ver el código fuente de otros módulos, el código fuente
Route de componentes, el código fuente de componentes ...
Router

Al igual que Swtichcon , los componentes correspondientes react-routerse importan y reexportan, y no existe un tratamiento especial para la implementación.

en conclusión:

1. react-router-domDependencia react-router, por lo que cuando usamos npmla dependencia de instalación, solo necesitamos instalar la biblioteca en el entorno correspondiente, no es necesario instalarla explícitamente react-router. Solo es necesario instalar el desarrollo basado en el entorno del navegador react-router-dom, react-nativesolo es necesario instalar el desarrollo basado en el entorno react-router-native. Las dependencias del paquete npmse resolverán e instalarán automáticamente.react-router-dompackage.json

react-router-domDepende de package.json:

"dependencies": {
    "history": "^4.7.2",
    "invariant": "^2.2.2",
    "loose-envify": "^1.3.1",
    "prop-types": "^15.5.4",
    "react-router": "^4.2.0",
    "warning": "^3.0.0"
  }

Instalado react-router-dom, npmanalizará e instalará los paquetes de dependencia anteriores. Como se puede observar, entre otros react-router.

1. Entonces, volvamos a la forma original de escribir. Para el desarrollo basado en el entorno del navegador, el método de escritura 1 está bien.

Link de referencia:

ReactTraining/react-router#4648
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/README.md