reactjs - 如何在 react-router-dom v6 中实现监听功能？

Question

我正在更新一个已使用 react-router-dom v5 实现的 React 项目的包。我已将 react-router-dom 更新为 v6。我在很多组件中使用了this.props.history，因此我不需要改变它的结构，所以我决定创建一个包装器，它具有该功能并将组件作为 Prop 传递给它，以免更改大量代码。这是包装器:

import * as React from 'react';
import { useLocation, useNavigate, useNavigationType, useParams } from "react-router";

export function withRouter(Child) {
  return (props) => {
    const [callBack,setCallBack] = React.useState();
    const location = useLocation();
    const navigate = useNavigate();
    const action = useNavigationType();
    const params = useParams();
    const match = {
      params: params
    }
    const history = {
      push: (url, onMount) => {
        if (onMount)
          setTimeout(() => navigate(url), 100)
        else
          navigate(url);

      },
      listen: (callback) => {
        setCallBack(callback);
      }
    }
    React.useEffect(() => {
      if (callBack) {
        callBack(location,action)
      }
    }, [location])

    return <Child {...props} history={history} location={location} match={match} />;
  }
}

我在这样的组件中使用了我的包装器:

function action(params) {
    return (
        <Layout {...params}>
            <PageInfo title={Utils.i18n('notificationList', true)} icon="ti-bell"/>
            <NotificationList {...params}/>
        </Layout>
    )
}

export default withRouter(action);

下面是包装组件的 componentDidMount 上的 listen 函数:

componentDidMount(): void {
        this.props.history.listen((location, action) => {
            const urlSearchParams = new URLSearchParams(window.location.search);
            const params = Object.fromEntries(urlSearchParams.entries());
            if (params.id) {
                this.setState({id:params.id})
            }
        });
        this.getNotification();
        Utils.scrollToTop();
 }

我在这次更新中遇到的问题是 listen 功能，它存在于 react-router-dom v5 中。因为在 Child 属性发生任何状态更改后，所有状态都被清除，所以 callBack 始终未定义，我无法在我的 listen 中实现功能 包装器。在这部分代码中，回调始终未定义:

 React.useEffect(() => {
      if (callBack) {
        callBack(location,action)
      }
    }, [location])

有人知道在我的包装器中实现 listen 功能吗？

Answer 1

我在这里看到的唯一明显的问题是缺少 useEffect 依赖项。 callback 和 action 都丢失了。

React.useEffect(() => {
  if (callback) {
    callback(location, action);
  }
}, [action, callback, location]);

一个更隐蔽的问题是通过 setState updater 函数将函数保存到 React 状态。 setState 函数接受一个值来更新状态或一个回调函数，该函数传递了前一个状态值并期望返回下一个状态值。如果要将回调函数保存到状态中，则需要使用回调函数语法并返回要保存到状态中的回调函数。

listen: (callback) => {
  setCallback(() => callback); // not setCallback(callback)
}

完整代码:

export const withRouter = Component => props => {
  const [callback, setCallback] = React.useState();
  const location = useLocation();
  const navigate = useNavigate();
  const action = useNavigationType();
  const params = useParams();

  const match = { params };

  const history = {
    push: (url, onMount) => {
      if (onMount) {
        setTimeout(() => navigate(url), 100);
      } else {
        navigate(url);
      }
    },
    listen: (callback) => {
      setCallback(() => callback);
    }
  }

  React.useEffect(() => {
    if (callback) {
      callback(location, action);
    }
  }, [action, callback, location]);

  return <Component {...props} {...{ history, location, match }} />;
};