README
¶
Vecty Router
A declarative client-side router for Vecty applications. Similar to react-router v4
Installation
go get marwan.io/vecty-router
Usage
You don't need to declare your routes at the top level. You can declare them inside any component and if they match they will render, otherwise, router will render an empty div instead.
package components
import (
"github.com/hexops/vecty"
"github.com/hexops/vecty/elem"
"marwan.io/vecty-router"
)
// Body renders the <body> tag
type Body struct {
vecty.Core
}
// Render renders the <body> tag with the App as its children
func (b *Body) Render() vecty.ComponentOrHTML {
return elem.Body(
router.NewRoute("/", &MainView{}, router.NewRouteOpts{ExactMatch: true}),
router.NewRoute("/blog", &Blog{}, router.NewRouteOpts{}),
router.NewRoute("/blog/{id}", &PostView{}, router.NewRouteOpts{ExactMatch: true}),
)
}
To retrieve a named variable like {id} in the example above you can do
// Render returns every title
func (pv *PostView) Render() vecty.ComponentOrHTML {
id := router.GetNamedVar(pv)["id"]
return elem.Div(
vecty.Text(id),
)
}
Other features
func (c *component) Render() vecty.ComponentOrHTML {
return elem.Span(
router.Link("/my/route", "click here", router.LinkOptions{}),
)
}
router.Redirect("/my/route")
Status
Currently vecty-router does not fallback to hash routing if the History API is not on your browser. It also calls vecty.Rerender on all routes whenever a route changes. It should/will do its own deducing of whether to call rerender on a route or not based on route matches and whether it's already mounted or not.
Alternatives
Documentation
¶
Overview ¶
Package router implements a simple history API router for Vecty (github.com/hexops/vecty). It can match exact patterns as well as named variables such as /users/{id}
Index ¶
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
func GetNamedVar ¶
GetNamedVar returns the parsed named variables from a URL. If you did NewRoute("/blog/{id}", someComponent{}). Then you can do GetNamedVar(someComponent{}) and get a map like this: {"id": "id-var"}
func Link ¶
func Link(route, text string, opts LinkOptions) *vecty.HTML
Link implements a frontend history Anchor tag.
func NotFoundHandler ¶
NotFoundHandler renders if no routes are matched at all.
Types ¶
type EventCallback ¶
EventCallback defines a vecty onClick handler
type LinkOptions ¶
LinkOptions - use to pass extra options to the link element like an ID, or class attribute.
type NewRouteOpts ¶
type NewRouteOpts struct {
ExactMatch bool
}
NewRouteOpts let you specify route matching options, such as exact match.
type Route ¶
Route keeps track of the component and the route it's meant to be matched against. so when a the URL of the browser changes (pushState), we can check whether we need to render it or not.
func NewRoute ¶
func NewRoute(pattern string, c vecty.Component, opts NewRouteOpts) *Route
NewRoute takes a pattern and a component, if the pattern matches the current URL, then it returns the component, otherwise it returns an EmptyComponent.
func (*Route) Render ¶
func (r *Route) Render() vecty.ComponentOrHTML
Render renders the underlying component or EmptyComponent if route does not match
Source Files