css - React Router v4 - 事件链接问题

Question

我在使用事件链接时遇到问题。我需要创建一些子路线并在“父”路线上保持活跃的样式。我怎样才能做到这一点？

我将 withRouter 用于路由目的。假设我有 3 个“父”路由的主导航 - /login |/注册/个人资料。

 render () {
    return (
      <div className='grid'>
        <Route exact path='/' component={HomePage} />
        <Route path='/login' component={LoginForm} />
        <Route path='/register' component={RegisterForm} />
        <PrivateRoute path='/profile' component={PersonalDetails} />
        <PrivateRoute path='/profile/delete-account' component={DeleteAccount} />
        <PrivateRoute path='/profile/payments' component={Payments} />
        <PrivateRoute path='/profile/food-preferences' component={FoodPreferences} />
      </div>
    );
}

在“/profile”路径上渲染的组件内部有额外的导航链接到 '/profile/delete-account/', '/profile/payments', '个人资料/食物偏好'。

static getProfileRoutes () {
    return profileRoutes.map(route => (
      <NavLink to={route.path} activeClassName='active-profile' className='profile-navigation-button' key={route.path}>
        <li className='profile-navigation-label'>{route.name}</li>
      </NavLink>
    ));
}

不幸的是，当我导航到“子”路由之一时，SideBar 中导航到 '/profile' 的按钮的事件样式丢失了。我该如何预防？修复它？

static getSideBarRoutes () {
    return sideBarRoutes.map(route => (
      <NavLink className='navigation-button' key={route.path} to={route.path}>
        <li className='navigation-item'>
          <div className={route.icon} />
          {route.name}
        </li>
      </NavLink>)
    );
}

路由工作正常 - 只是 active 类在 Sidebar 上丢失的问题

非常感谢您的帮助。

Answer 1

例如

const navigation = (props) => {
  let styleClass= "not-active-class";
  if (props.location.pathname.indexOf(props.route) !== -1) {
    // checking if parent route is contained in route and setting active class
    styleClass= "active-class";
  }

  return (
    <NavLink
      to={props.route}
      activeClassName={styleClass} >
      <p>{props.route}</p>
    </NavLink>
  );
}