路由器推送在 useEffect 挂钩中不起作用

Question

我有以下组件，我希望通过router's push method immediately cos router push is inside the useEffect` 挂钩转到另一条路径。

但路由器推送似乎从未发生过。 ShowLoading 组件只是一个加载屏幕（显示加载微调器）。

页面只是停留在加载微调器屏幕上。

我做错了什么，为什么我没有被推送到新页面？请建议。谢谢。

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：如果我执行以下操作但希望通过路由器执行此操作，则会按预期进入新路径。

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

Answer 1

在使用withRouter 时，您可以获得match、history 和location 作为道具。所以你可以像这样得到history的推送：

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