Estoy acostumbrado a reaccionar-router-dom + redux + middleware Redux Thunk. Obtuve la página de índice, al cargarla llama al método de solicitud de datos al servidor. Este método se implementa como una función asíncrona que se pasa a dispatch (y que en realidad es interceptada para ejecutar Redux Thunk).
Durante la ejecución de la función de solicitud de datos asíncronos, si se producen errores, se realiza una redirección a las páginas 404/500. La implementación de esta parte de la función es la siguiente: como saben, cada componente para el que se implementa el enrutamiento recibe accesorios con los campos correspondientes (coincidencia, ubicación, historial), luego los mismos accesorios se pasan a la acción asíncrona como argumento. , y por lo tanto las posibilidades ya están disponibles en sus redireccionamientos a través de history.push / go / etc.
El problema es que hay una vinculación al hecho de que el componente debe tener este tipo de datos de accesorios en principio. Esto, por supuesto, se puede resolver pasando props al componente deseado o usando withRouter para ello. También encontré una solución anterior con la importación del historial del paquete del mismo nombre directamente al archivo con la acción deseada, pero con este método, aunque la ruta en la barra de direcciones cambia, pero la transición en sí no lo es.
En realidad, quiero entender, tal vez generalmente estoy tratando de empujar una redirección donde no debería estar, y de ahí todos los problemas. ¿Dónde es mejor implementar cosas como la redirección si realiza solicitudes al servidor dentro de acciones asincrónicas/middlware? Agradecería indicar el sentido de la búsqueda, artículos sobre el tema, mejores prácticas, etc.
// MainPage.js class MainPage extends PureComponent { componentDidMount() { this.props.fetchData(this.props); } render() { const SpinnerModal = withModal(Spinner, { bg: false, interactionsDisabled: true }); if (!this.props.index) return <SpinnerModal/>; return ( <> <Promo index={this.props.index}/> </> ); } } const mapStateToProps = (state) => ({ index: serverSelectors.serverIndexSelector(state) }); const mapDispatchToProps = (dispatch) => bindActionCreators(serverActions, dispatch); export default connect(mapStateToProps, mapDispatchToProps)(MainPage); // redux/server/actions.js export const fetchData = (props) => async (dispatch, getState, api) => { try { const response = await api.get(props.uri); dispatch({ type: types.SERVER_FETCH_PAGE_DATA, payload: { data: response.data }, }); } catch (error) { switch (error.status) { case 404: { props.history.push("/404"); break; } case 500: { props.history.push("/500"); break; } default: } } };Tiene razón, la suposición subyacente es que su componente debe tener estos datos en principio. Sin embargo, con el desarrollo de componentes funcionales, han surgido cada vez más ganchos para paliar tales inconvenientes. En su caso, el enlace useHistory puede ser increíblemente útil.
import { useHistory } from "react-router-dom"; function HomeButton() { let history = useHistory(); function handleClick() { history.push("/home"); } return ( <button type="button" onClick={handleClick}> Go home </button> ); } Este gancho lo libera de pasar el history de un componente a otro.
Una solución simple (pero amateur) sería simplemente cambiar de location . Por ejemplo:
window.location.href = "/404"
En cualquier caso, si no está aprovechando las capacidades especiales que vienen con el uso de un Pure Component , un componente sin estado (funcional) funcionaría mucho mejor. Especialmente en este escenario.
Editar0:
Investigué un poco más tu pregunta y encontré este artículo que describe un concepto interesante. Uso de redux middleware para facilitar las redirecciones. El autor del artículo describe una situación en la que, al registrarse el usuario, debemos realizar una llamada a la API y también redirigir al usuario a otra página.
El autor logra esto encadenando 2 middleware . El primero para hacer la llamada a la API y el segundo para actualizar una propiedad redirectTo en el estado global.
Si la llamada a la API es exitosa, se envía una acción de redirect para actualizar la propiedad redirectTo en el global state con la ruta de redirección. Finalmente, usando una declaración if simple en el componente del formulario de registro que está conectado a la propiedad redirectTo en el estado global:
if (props.redirectTo) { return <Redirect to={props.redirectTo} />; }