reactjs - NavLink onActive 回调
问题描述
有没有办法知道什么时候NavLink
激活?像这样的东西?:
<NavLink to="/mylink" activeClassName="active" onActive={this.doSomething} />
解决方案
您可以使用NavLink
'isActive
回调来实现这一点。isActive
允许您在链接处于活动状态时定义自己的行为;它获取match
和您当前的location
对象。您可以修改它以获取一个回调,如果匹配为真,该回调将触发。这是一个简单的例子:
const isActive = onActive => (match, location) => {
if (match) {
onActive();
}
return match;
}
const App = () => {
const onActive = () => console.log("link is active");
return (
<BrowserRouter>
<div>
<NavLink to="/abc" activeClassName="active" isActive={isActive(onActive)}>Go To ABC</NavLink>
<Route path="/abc" render={() => <h1>ABC Page</h1>} />
</div>
</BrowserRouter>
);
}
推荐阅读
- azure - LUIS 应用程序未显示在 Luis 门户中,LUIS 应用程序使用 ansible 角色生成
- activecollab - ActiveCollab:ActiveCollab API 响应中缺少 Access-Control-Allow-Headers
- docker - 交替使用“docker”和“docker-compose”命令的后果是什么?
- video - 批量检查 YouTube 网址
- r - 在 R 中创建一个包含条件行和的新变量
- c# - 如何在实体框架 6 中加入后包含集合字段?
- artificial-intelligence - 错误:无法完成 Watson Studio Modeler 流中的最后一个操作
- java - 什么是 com.opensymphony.workflow.loader.ActionDescriptor?
- apache - 如何在 apache httpd 中禁用自动刷新
- python - Unicodedata.normalize : TypeError: normalize() argument 2 must be str, not list