Rails 7 导航激活类问题：子页面无法保持激活状态

问题现状 #

当前在列表页面（如用户列表、政策列表）时，导航的激活类正常生效，但进入用户详情页、政策详情页等子路径页面时，对应导航的激活类会消失，需要让政策/用户相关的所有子页面都保持对应导航项的激活状态。

当前代码 #

侧边栏视图代码 #

<li>
  <div class="text-xs font-semibold leading-6 text-gray-400 px-6">Governance</div>
  <ul role="list" class="-mx-2 space-y-1">
    <li class="">
      <%= link_to users_path,  :class => current_class?(users_path) do%>
        <svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
        </svg>
        People
      <%end%>
    </li>
    <li class="">
      <%= link_to policies_path, :class => current_class?(policies_path) do%>
        <svg class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
        </svg>
        Policies
      <% end %>
    </li>
  </ul>
</li>

原Helper代码 #

def current_class?(active_path)
  if request.path == active_path
    return "text-white group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold hover:text-white hover:bg-gray-800 bg-blue-900 px-6"
  else
    return "text-gray-400 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold hover:text-white hover:bg-gray-800 px-6"
  end
end

解决方案 #

原因分析 #

原Helper通过request.path == active_path判断路径完全匹配，但子页面路径（如/users/1）和列表页路径（/users）不相等，导致激活类无法触发。

方案1：基于控制器判断（更可靠） #

修改Helper，通过当前控制器名称判断，只要是对应控制器下的页面，都激活导航项：

def current_class?(target_controller)
  current_controller = controller.controller_name
  if current_controller == target_controller
    "text-white group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold hover:text-white hover:bg-gray-800 bg-blue-900 px-6"
  else
    "text-gray-400 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold hover:text-white hover:bg-gray-800 px-6"
  end
end

然后更新视图中的调用，传入控制器名称：

<%= link_to users_path, :class => current_class?('users') do %>
<!-- ... -->
<%= link_to policies_path, :class => current_class?('policies') do %>

方案2：基于路径前缀判断（简单直接） #

修改Helper，判断当前路径是否以目标路径开头：

def current_class?(base_path)
  if request.path.start_with?(base_path)
    "text-white group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold hover:text-white hover:bg-gray-800 bg-blue-900 px-6"
  else
    "text-gray-400 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold hover:text-white hover:bg-gray-800 px-6"
  end
end

视图调用无需修改，仍使用原方式传入路径即可：

<%= link_to users_path, :class => current_class?(users_path) do %>
<!-- ... -->
<%= link_to policies_path, :class => current_class?(policies_path) do %>

内容的提问来源于stack exchange，提问作者morris menanya