如何在 react-router-dom v6 中监听路由变化

Question

我正在尝试将旧的 React 路由器 dom 代码迁移到 v6，我想知道如何监听路由更改，我现在正在使用 useHistory

 const history = useHistory()
//then
history.listen(...)

我确实阅读了新文档，并且确实发现 useHistory 已更改为 useNavigate

 const navigate = useNavigate()
//then
navigate.listen(...) // listen is not a function

你能帮我找到一种方法来监听 v6 中的路由变化吗

// This is a React Router v6 app
import { useNavigate } from "react-router-dom";

function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

原文由 SalahEddineBeriani 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

navigate 函数是一个函数，而不是像旧版本 react-router-dom 版本 5 的 history 对象那样的对象。

您仍然可以创建一个自定义 history 对象，但您需要创建一个自定义路由器才能使用它。这允许 您 导入 history 对象并创建侦听器。

创建一个自定义路由器示例，使用一个更高级别的路由器作为它们如何管理位置和状态的示例，即 BrowserRouter ：

 const CustomRouter = ({ history, ...props }) => {
  const [state, setState] = useState({
    action: history.action,
    location: history.location
  });

  useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      {...props}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
};

在您的代码中创建自定义 history 对象，供您的新自定义路由器和其他组件使用。确保您已将 history@5 安装为项目依赖项。这与 RRDv6 使用的版本相同。如果您需要安装它，请运行 npm i history@5 将其添加到项目的依赖项中。

 const history = createBrowserHistory();
export default history;

使用你的路由器并将你的历史对象传递给它。

 import CustomRouter from '../CustomRouter';
import history from '../myHistory';

...

<CustomRouter history={history}>
  ....
</CustomRouter>

在您想要监听位置变化的组件中，导入您的历史对象并像之前一样调用 listen 回调。

 import history from '../myHistory';

...

useEffect(() => {
  const unlisten = history.listen((location, action) => {
    // ... logic
  });

  return unlisten;
}, []);

如果需要，您也可以创建自己的自定义 useHistory 挂钩，它只返回您的历史记录对象。

更新

react-router-dom 已经开始为这样的用例导出 HistoryRouter 。而不是导入低级 Router 并实现你导入的内部逻辑 unstable_HistoryRouter as HistoryRouter 并传递你的自定义历史对象（内存，哈希等）。

 import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import history from "../myHistory";

...

<HistoryRouter history={history}>
  ....
</HistoryRouter>

原文由 Drew Reese 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

从文档 ( https://reactrouter.com/en/main/hooks/use-location ) 中，使用这个钩子

let location = useLocation();

React.useEffect(() => {
  ga('send', 'pageview');
}, [location]);

原文由 José Lozano Hernández 发布，翻译遵循 CC BY-SA 4.0 许可协议