react-router, react-redux, antd (diseño)
Introducción de la documentación: React Router es una poderosa biblioteca de enrutamiento basada en React que le permite agregar rápidamente vistas y flujos de datos a su aplicación mientras mantiene la sincronización entre páginas y URL.
En mi opinión (estoy desarrollando iOS), esto es como la combinación de UITabbarController y UINavigattionController en iOS, que controla el salto de cada ViewController, la diferencia es que reaccionar-router puede controlar la ubicación de; la Ruta, mientras que iOS ha arreglado la barra de estado, la barra de navegación, la posición y la altura de la barra de pestañas, y solo puede controlar su ocultación y visualización.
Según el documento: Redux es un contenedor de estado de JavaScript que proporciona una gestión de estado predecible.
Mi entendimiento es: este componente administra el modelo o viewModel, liberándonos de la operación setState; al mismo tiempo, se pueden realizar algunas operaciones de middleware (applyMiddleware), como: loggerMiddleware, etc.
Una biblioteca de componentes de UI muy rica. El diseño mencionado en el título es el estilo de diseño que utilicé durante el proceso de desarrollo.
Si solo utilizas uno de estos componentes, según la documentación, puedes hacerlo bien. Pero cuando los tres se usan juntos, surgen algunos problemas.
Mi enfoque es poner Ruta dentro del Contenido y usar el encabezado, similar a la barra de pestañas en iOS. Agregue la etiqueta Link en el encabezado para controlar su cambio y salto.
Habrá un problema en este momento. La interfaz de inicio de sesión no requiere que se muestre el encabezado. Parece que después de muchos intentos (que pueden no ser óptimos), agregué un Switch a la capa externa de index.js y coloqué el índice dentro de Route. El nombre de la ventana aquí se basa en la jerarquía en el desarrollo de iOS, no en la ventana en js.
Cuando necesites saltar a la interfaz de inicio de sesión, this.props.history.replace("login")
Cuando necesites saltar a rutas de nivel inferior, this.props .history.push( "detial")
Esto causa algunos problemas con el salto del enrutador de reacción. this.props.history no está definido. En este caso, no puedes saltar.
Prueba cero: ¿Perdiste el historial en el método mapStateToProps? Es más, el resultado no lo soluciona.
Pruebe uno: al saltar, window.location.href ("llogin"), esto se puede lograr, pero la página se actualizará cada vez, ¿cuál es el significado de reaccionar-enrutador?
Finalmente, ?withRouter se proporciona en react-router-dom. Simplemente coloque ?withRouter fuera de conexión.
Además, cada página puede necesitar un Proveedor, pero todo el proyecto solo puede tener un Enrutador, por lo que no se puede escribir como en el documento redux. En cambio, el enrutador debe colocarse fuera del proveedor (así es como lo escribí y se puede usar sin alertas. Pero no estoy seguro de que sea 100% razonable).