Question

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

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

由于

Answer 1

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

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

将console.log替换为执行sessionStorage更新等功能的功能，就是这样。

另一种方法是使用onEnter prop Route prop来为每条路径输入执行某个函数：

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

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

Answer 2

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

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


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

React router：在每个<link />导航上执行自定义功能

2 个答案: