Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

131
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!