Установка активного состояния элемента Nav в зависимости от маршрута с помощью ReactBootstrap - PullRequest
Новая
       33

Установка активного состояния элемента Nav в зависимости от маршрута с помощью ReactBootstrap

1 голос
/ 14 апреля 2019

Каков наилучший способ обеспечения выбора правильного элемента Nav с помощью React Bootstrap и Hyperstack Router?

Я знаю, что могу использовать метод Link, но я хочу использовать конкретную Bootstrap NavВместо этого.

Есть хороший пример того, чем кто-нибудь может поделиться?

1 Ответ

2 голосов
/ 14 апреля 2019

React router фактически обрабатывает это автоматически! Я использовал это в одном из моих приложений, может быть, это может помочь для вдохновения: 

class BS < Hyperstack::Component::NativeLibrary
  # subclasses of Hyperstack::Component::NativeLibrary
  # are wrappers around JS component libraries.
  # once imported BS acts like an ordinary ruby module

  imports 'ReactBootstrap'
end

class App < HyperComponent
  include Hyperstack::Router
  include Hyperstack::Router::Helpers

  ROUTES = {
    '/' => ['Home', Home],
    '/overview' => ['Overview', Overview]
  }

  render do
    DIV {
      H1 { "Hello there from Hyperstack!" }
      BS::Nav(variant: 'pills') {
        ROUTES.each do |k, v|
          BS::Nav.Item() {
            NavLink(k, class: 'nav-link', exact: true) { v[0] }
          }
        end
      }
      ROUTES.each do |k, v|
        Route(k, mounts: v[1], exact: true)
      end
    }
  end
end
...