Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

130
Visualizações
Push to new route without any further actions on the component

We use an external componet which we don't control that takes in children which can be other components or used for routing to another page. That component is called Modulation.

This is how we are currently calling that external Modulation component within our 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);

This MyComponent is then called within 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;

So when we match typeB, we do perform the rerouting correctly.
But is not clean. OtherComponent1 and OtherComponent2 temporarily shows up (about 2 seconds) before it reroutes to new page.

Why? Is there a way to block it, ensure that if we are performing router.push('') we do not show these other components
and just redirect cleanly?

P.S: react-router version is 3.0.0

almost 4 years ago · Santiago Trujillo
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda