React router:在每个<Link>导航上执行自定义功能

Question

对不起,如果已经回答了这个问题.但有没有办法在每个<Link>导航上执行自定义功能？最好不要创建自定义<Link>包装器.

我希望在应用程序内的每个导航之前将一些信息提供给sessionStorage.

谢谢

Answer 1

我确实在寻找这个答案，但在任何地方都找不到它，然后我做了一些实验，这是我的答案，对我有帮助，所以我想我会分享！

如果你使用React Router 的uselocation钩子。这个钩子为您提供了一个具有关键属性的对象，该属性在每次路由器更改时都会发生变化。然后，您可以创建一个 useEffect 来监视此属性，并在该键发生更改时触发一个函数。请参阅下面的示例

const location = useLocation();
useEffect(() => {
    console.log('location', location.key); // { key: "3uu089" }
    // Fire whatever function you need.
    sessionStorage.setItem('whatever', state);

}, [location.key]);

Answer 2

你可以onClick用来执行任何动作

<Link
  to="/"
  onClick={() => console.log('Heading to /')} />

替换console.log为执行sessionStorage更新等功能,就是这样.

另一种方法是使用组件的onEnterprop Route来执行每个路由输入的某个功能:

<Route
  path="/"
  component={App}
  onEnter={() => console.log('Entered /')} />

请参阅参考,或使用react-router和react-redux的示例.