Router push not working from within useEffect hook

Question

I have the following component where I am expecting to go to another path via router's push method immediately cos router push is inside the useEffect` hook.

But router push never seems to happen. The ShowLoading component is just a loading screen (shows a loading spinner).

The page is just stuck on the loading spinner screen.

What am I doing wrong, why am I not being pushed to the new page? Pls advice. Thanks.

import React from 'react';
import Cookies from 'js-cookie';
import { ShowLoading } from '../../ShowLoading';
import { withRouter } from 'react-router';

const MyComponent = ({
  router: { push, location },
}) => {
  React.useEffect(() => {    
    // this cookie gets set thus clearly we are entering this useEffect. 
    Cookies.set('temp', '1');

    const value = 'test';
    const params = location.search ? `${location.search}` : '';

    // seems like this has no effect, no pushing and moving to new page path. 
    push(`/${value}/my_path${params}`);

  }, []);
  return (<ShowLoading />);
};

export default (withRouter(MyComponent);

P.S: Goes to a new path as expected if I do the following but looking to do it via a router.

window.location.pathname = `/${value}/my_path${params}`;

Uchechukwu Nwafor · Answer 1 · 2021-09-22T15:07:32.327

1

You can get match, history and location as props when using withRouter. So you can get the push from history like this:

import React from 'react';
import Cookies from 'js-cookie';
import { ShowLoading } from '../../ShowLoading';
import { withRouter } from 'react-router';

const MyComponent = ({
  history,
  location
}) => {
  React.useEffect(() => {    
    // this cookie gets set thus clearly we are entering this useEffect. 
    Cookies.set('temp', '1');

    const value = 'test';
    const params = location.search ? `${location.search}` : '';

    history.push(`/${value}/my_path${params}`);

  }, []);
  return (<ShowLoading />);
};

export default withRouter(MyComponent);

edited Sep 22 '21 at 15:07

answered Sep 22 '21 at 12:07

Uchechukwu Nwafor

420
4
10

If I do this, the spinner stops but I stay on same page. I also no longer set the cookie for some reason. – stacky Sep 22 '21 at 13:11
Does the params value correspond with that you're looking for? Try logging it on the console – Uchechukwu Nwafor Sep 22 '21 at 13:17
I am actually on the same path currently, example - /value/my_path?param=1. From here, I just want to go back to same path again - /value/my_path?param=1. Something like a refresh, where due to the cookie being set, now some other actions takes place due to refresh. – stacky Sep 22 '21 at 13:20
window.location.pathname = ... works for this refresh. But I am losing some tracking values due to that thus trying to use React Router instead. – stacky Sep 22 '21 at 13:23
Oh, you just want to refresh the page?? try history.go(0) You can also check out this section for possible answers https://stackoverflow.com/questions/46820682/how-do-i-reload-a-page-with-react-router – Uchechukwu Nwafor Sep 22 '21 at 13:26
But if I use history.go(0), wouldn't that essentially be same as window.location.pathname = ... which loses tracking information for me. – stacky Sep 22 '21 at 13:33
On a second thought, I read your question again and wondered why you need to refresh exactly when you can actually have a function that can achieve what you want after the cookie has been set. Or is there something I'm missing? – Uchechukwu Nwafor Sep 22 '21 at 15:10
Its some logic we have in place where if we enter this component (coming from another component), meant to do the redirect. Due to the way it is setup, need to do it via a component. – stacky Sep 22 '21 at 15:20

Router push not working from within useEffect hook

1 Answers1