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

# Link to other views

Links to different view can be generated by `linkTo` function:

import { linkTo } from "brew-js-react";
import { Home } from "./views";

function Component() {
    return (
        <a href={linkTo(Home)}>Home</a>;
    );
}

// in ./views
export const Home = registerView(
    () => import('./views/HomeImpl'), 
    { view: 'home' });

:::warning
Note that the view component parsed to `linkTo` should be the one returned by `registerView`.
:::

:::info
The link is formatted such that when user open the link in new tab, the router in new page will be able to resume to correct view.
:::

## Passing route parameters

Additional route parameters can be passed and be included in the generated path according to router settings:

import { linkTo } from "brew-js-react";
import { ProductInfo } from "./views";

function Component() {
    return (
        <a href={linkTo(ProductInfo, { id: 5 })}>Product 5</a>;
    );
}

The link will be generated as `/product/5` with following setup:

brew.with(router)(app => {
    app.useRouter({
        routes: [
            '/{view:product}/{id}',
            ...
        ]
    })
});
    
// in ./views
export const ProductInfo = registerView(
    () => import('./views/ProductInfoImpl'), 
    { view: 'product', id: /.*/ });

In actual product info component, the `id` parameter can be retrieved by `useRouteParam` hook:

// in ./views/ProductInfoImpl
export default function ProductInfoImpl() {
    const id = useRouteParam('id');
    /* ... */
}