---
tags: brew-js-react
---

# Register view components

View components are associated to different paths using `registerView`.

In order to have route parameters recognized, router must be configured with known routes.

app.useRouter({
    routes: [
        '/{view:product}/{id?}'
        '/{view}'
    ]
});

When resolving for views, first route parameters are resolved from current path using configured routes. For examples:

| Path | Route parameters |
| ------------ | ------------------------- |
| `/home` | `{view:'home'}` |
| `/product` | `{view:'product'}` |
| `/product/1` | `{view:'product',id:'1'}` |

Then route parameters are matched with those passed to `registerView`.

export const Home = registerView(() => "./views/Home", {
    view: 'home'
});
export const Product = registerView(() => "./views/Product", {
    view: 'product'
});
export const ProductInfo = registerView(() => "./views/ProductInfo", {
    view: 'product',
    id:   /.+/
});

When combined, the view at `./views/Home` will be matched when visiting `/home`.

| Path | Matched views (in precendence) |
| ------------ | ------------------------------ |
| `/home` | `Home` |
| `/product` | `Product` |
| `/product/1` | `ProductInfo`, `Product` |

:::info
When multiple views match, views registered with more parameters takes precedence. See [Render views](/lIu97Gu3T1GMELKLvA5SYg).
:::

## Regex and callback

Dynamic data in routes can be matches using regex or callback.

For example, if `ProductInfo` is registered with:

registerView(() => "./views/ProductInfo", {
    view: 'product',
    id:   /^\d+$/
});

then it will match `/product/1` but not `/product/foo`.

## Exclusion by `null`

To match a route without a certain parameter, use `null`.

For example, if `Product` is registered with:

registerView(() => "./views/Product", {
    view: 'product',
    id:   null
});

Then it will not match `/product/1` since resolved route parameter `id` is not empty.

## Directly register component without import

==Since `v0.3.1`==

It is possible to register components without async import:

const MyView = registerView(function MyViewImpl () {
    return (<div>...</div>);
});