Usamos un componente externo que no controlamos que toma elementos secundarios que pueden ser otros componentes o
utilizarse para enrutar a otra página. Ese componente se llama Modulation .
Así es como llamamos actualmente a ese componente de Modulation externo dentro de nuestro MyComponent .
import React, {Fragment} from 'react';
import { withRouter } from "react-router";
import { Modulation, Type } from "external-package";
const MyComponent = ({
router,
Modulation,
Type,
}) => {
// Need to call it this way, it's how we do modulation logics.
// So if there is match on typeA, nothing is done here.
// if there is match on typeB perform the re routing via router push
// match happens externally when we use this Modulation component.
const getModulation = () => {
return (
<Modulation>
<Type type="typeA"/> {/* do nothing */}
<Type type="typeB"> {/* redirect */}
{router.push('some.url.com')}
</Type>
</Modulation>
);
}
React.useEffect(() => {
getModulation();
}, [])
return <Fragment />;
};
export default withRouter(MyComponent);
Este MyComponent luego se llama dentro de MainComponent .
import React, { Fragment } from 'react';
import MyComponent from '../MyComponent';
import OtherComponent1 from '../OtherComponent1';
import OtherComponent2 from '../OtherComponent2';
const MainComponent = ({
// some props
}) => {
return (
<div>
<MyComponent /> {/* this is the above component */}
{/* We should only show/reach these components if router.push() didn't happen above */}
<OtherComponent1 />
<OtherComponent2 />
</div>
);
};
export default MainComponent;
Entonces, cuando coincidimos con el typeB , realizamos el cambio de ruta correctamente.
Pero no está limpio. OtherComponent1 y OtherComponent2 aparecen temporalmente (alrededor de 2 segundos) antes de redirigir a una página nueva.
¿Por qué? ¿Hay alguna manera de bloquearlo? Asegúrese de que si estamos ejecutando router.push('') no mostramos estos otros componentes
y simplemente redirigir limpiamente?
PD: la versión de react-router es 3.0.0