反应路由器：在每个 <Link> 导航上执行自定义功能答案

【问题标题】：React router: execute custom function on every <Link> navigation反应路由器：在每个 <Link> 导航上执行自定义功能
【发布时间】：2017-01-10 16:32:50
【问题描述】：

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

我想在我的应用程序中每次导航之前将一些信息放入 sessionStorage。

谢谢

【问题讨论】：

仅Link 导航或每次历史更改？

标签： javascript reactjs react-router

【解决方案1】：

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

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

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

}, [location.key]);

【讨论】：

我使用了location.pathname 而不是你建议的。我的useEffect 在每次更改 url 时都会被解雇

【解决方案2】：

你可以像下面这样在 react 路由的路由对象上调用任何函数：

function someFunction(a,b){ 
 const c = a + b;
 return c
} 


<Switch>
  <Route exact exact path="/" component={SomeComponent} />
  <Route path="/reload" render= {(props)=>someFunction() } />
</Switch>

【讨论】：

【解决方案3】：

您可以使用onClick 执行任何操作，比如说

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

将console.log 替换为可以执行sessionStorage 更新等的函数，就是这样。

另一种方法是使用Route 组件的onEnter 属性来执行每个输入路径的某个功能：

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

请参阅reference 或example with react-router and react-redux。

【讨论】：

我不想每次使用<Link>时都写onClick={() => console.log('Heading to /')}部分
是的，你是对的。我的错，我应该在我的原始答案中指定这一点。我不想这样做的原因是因为我在 30 个不同的地方使用<Link> 并且调整它会有点困难。
并不像为此创建一个自定义组件那么难，只要想想几个月后您会忘记自定义Link 组件的用途。 :) 我认为还有另一种方法，刚刚更新了答案。
onEnter of Route 现在在 react-router v4 中已弃用
嗨 Anurag，感谢您提出这个问题！那有什么新方法呢？（如果有）