如何使用 react-router 5 在某些页面的路由更改上运行代码

Question

我在 v4 上找到了很多带有 onLeave 函数的示例。然而，这似乎在 v4 之后就停止了。

我见过一些<Prompt> 的例子，但我认为这不是我要找的。如果您有合适的案例，我愿意接受。

我的场景： React v16 应用程序，我有多个表。我在商店中有一个部分（全局状态），我保留了某些 ui 偏好。表格分页并重用一些相同的状态信息进行分页、排序等。

用户故事 - 用户选择第 4 页，然后导航到另一个表，仍然在第 4 页（从商店读取分页）。我只是想从状态中清除值（我使用 redux，所以我将调用一个动作来执行此操作）但我如何才能触发它，例如，仅在我的应用程序中的几条路由上。这样我可以在休假时重置它，并在用户到达下一张桌子时准备好？

//edit for comment 1, basic example
const routes = [
  {
    path: "/one-thing",
    component: OneThing,
  },
  {
    path: "/two-thing",
    component: TwoThing,
  }, 
...

这是一个巨大的应用程序，但这可能会澄清。当我离开路径 /one-thing 时，如何运行代码？

我们曾经在 v4 中能够做到这一点

  {
    path: "/two-thing",
    component: TwoThing,
    onLeave: doAThing,
  }, 

Answer 1

听起来您可以通过父组件中的history 对象来监听当前位置的变化。

history.listen

import { useHistory } from 'react-router-dom';
import { useEffect } from "react";

...

const history = useHistory();

useEffect(() => {
  const unlisten = history.listen((location, action) => {
    console.log('Route changed', { location, action });
    // Apply route change logic, i.e. dispatch to store
  });
  return unlisten;
}, []);

或者在有表的组件中使用卸载useEffect清理功能。

import { useEffect } from "react";

...

useEffect(() => {
  return() => {
    // component unmounting (maybe from route change)
    // Apply route change logic, i.e. dispatch to store
  };
}, []);