> For the complete documentation index, see [llms.txt](https://bemtv.gitbook.io/bemtvjs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bemtv.gitbook.io/bemtvjs/router-automatic-routing.md).

# Router(automatic routing)

A Router is used for navigation between views of various components in a Bemtv application, allows you to change the browser's URL and keeps the UI synchronized with the URL.

Bemtv uses an innovative automatic route creation system, this is possible because the components can behave like routes/pages.

### **Automatic routing**

Bemtv is able to automatically figure out when a “normal” component should also be treated as a route:

A regular component:

```javascript
import { _ } from "bemtv";

const { template } = _`AboutUs`();

template`We are cool!`;
```

The component responsible for rendering the App:

```javascript
import { _ } from "bemtv";

const { template, render } = _`App`();

template`
      Welcome!  br[]br[]

      #[] br[]br[]
      
      #AboutUs[ Link to about us ]`;

render();
```

The second component uses the `#[]` symbol, it is within it that the routes are rendered.

Note the `#AboutUs[...]`, this is where the “magic” happens. First, Bemtv will read the `App` component template and find that the `AboutUs` component is also a route (thanks to the `#` before it), and when the template is rendered, everything inside the `#AboutUs[...]` component will be wrapped in an `a` tag with the `href` attribute pointing to the route.

The route address will be the component name in kebab-case: `/about-us`.

When the user clicks on the link, the `AboutUs` component will be rendered in `#[]`.

Bemtv will also figure out that the component is a route whenever we access some method of the component that targets routes, even if it is not called(thanks to Proxies).

### **Defining properties for the route**

We can define properties to define the behavior of the route:

```javascript
import { _ } from "bemtv";

const { route, template } = _`AboutUs`();

route({
  title: "About us!", // The title of the document.
  concat: "1234567/hey/89", // Allows you to concatenate a `string` in the route link
});

template`We are cool!`;
```

### **Going to the route**

To render the route without a user action, we can use the `renderRoute()` method:

```javascript
import { _ } from "bemtv";

const { renderRoute, template } = _`AboutUs`();

setTimeout(() => {
  renderRoute();
}, 3000);

template`We are cool!`;
```

### **Route/component Root**

If you create a component with the name `Root`, it will be rendered whenever there is no other active route.