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}`;
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);