# ion-route

Router is a component that can take a component, and render it when the Browser URl matches the url prop

> Note: this is only meant for vanilla JavaScript project. For Angular projects, use `ion-router-outlet` and the Angular router.

<!-- Auto Generated Below -->


## Properties

| Property         | Attribute   | Description                                                                                                                                                                                                                                                          | Type                   |
| ---------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
| `componentProps` | --          | A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed to the defined component when rendered.                                                                                                                                         | `{[key: string]: any}` |
| `component`      | `component` | Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches.  The value of this property is not always the tagname of the component to load, in ion-tabs it actually refers to the name of the `ion-tab` to select. | `string`               |
| `url`            | `url`       | Relative path that needs to match in order for this route to apply.  Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props.                                                       | `string`               |


## Events

| Event                 | Description                                                        |
| --------------------- | ------------------------------------------------------------------ |
| `ionRouteDataChanged` | Used internaly by `ion-router` to know when this route did change. |


----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*
