小编Hum*_*l37的帖子

React router v6 History.listen

在 React Router v5 中,历史对象有一个监听方法。使用该方法,我编写了一个 usePathname 挂钩来在路径更改时重新呈现组件。在 React Router v6 中,这个方法不再存在。像这样的事情有替代方案吗?我不想使用 useLocation 因为如果状态发生变化它也会呈现,而在本例中我不需要。

该钩子与 v5 一起使用。

import React from "react";
import { useHistory } from "react-router";

export function usePathname(): string {
  let [state, setState] = React.useState<string>(window.location.pathname);

  const history = useHistory();
  React.useLayoutEffect(
    () =>
      history.listen((locationListener) => setState(locationListener.pathname)),
    [history]
  );
  return state;
}
Run Code Online (Sandbox Code Playgroud)

reactjs react-router

26
推荐指数
2
解决办法
2万
查看次数

标签 统计

react-router ×1

reactjs ×1