使用React Bootstrap和Hyperstack Router选择确保正确导航项的最佳方法是什么?
我知道我可以使用Link
方法,但我想使用特定的Bootstrap Nav
项目。
有没有人可以分享的好例子?
React路由器实际上自动处理这个!我在我的一个应用程序中使用了它,也许它可以帮助灵感:
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