当 url 在反应导航链接中启动字符串时，我可以添加活动类吗?

Question

当 url 以"/teacher/create/"字符串开头时，如何在反应导航链接中添加活动类？

Answer 1

<NavLink to={"/teacher/create/"} exact activeClassName={this.props.location.pathname.startsWith("/teacher/create/") && "activeLink"}>{title}</NavLink>

并添加 CSS：

.activeLink {
color: red;
}

Answer 2

<NavLink to={"/teacher/create/2"} exact activeClassName={this.props.location.pathname === "/teacher/create/2" && "activeLink"}>{title}</NavLink>

并添加 CSS：

.activeLink {
color: red;
}

react-router-dom： "^4.1.2">

Answer 3

我不知道上面的其他解决方案是如何工作的，但就我而言，我无法访问 this.props.location。您可以通过尝试以下操作来执行此操作：

export const LooseNavLink = props => (
<NavLink {...props} isActive={(match, location) => location.pathname.startsWith(props.to.pathname)}/>
)