# Passing Props to Route Components

Using $route in your component creates a tight coupling with the route which limits the flexibility of the component as it can only be used on certain URLs.

To decouple this component from the router use option props:

Instead of coupling to $route:

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new KduRouter({
  routes: [{ path: '/user/:id', component: User }]
})

Decouple it by using props

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new KduRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // for routes with named views, you have to define the `props` option for each named view:
    {
      path: '/user/:id',
      components: {
        default: User,
        sidebar: Sidebar
      },
      props: {
        default: true,
        // function mode, more about it below
        sidebar: route => ({ search: route.query.q })
      }
    }
  ]
})

This allows you to use the component anywhere, which makes the component easier to reuse and test.

# Boolean mode

When props is set to true, the route.params will be set as the component props.

# Object mode

When props is an object, this will be set as the component props as-is. Useful for when the props are static.

const router = new KduRouter({
  routes: [
    {
      path: '/promotion/from-newsletter',
      component: Promotion,
      props: { newsletterPopup: false }
    }
  ]
})

# Function mode

You can create a function that returns props. This allows you to cast parameters into other types, combine static values with route-based values, etc.

const router = new KduRouter({
  routes: [
    {
      path: '/search',
      component: SearchUser,
      props: route => ({ query: route.query.q })
    }
  ]
})

The URL /search?q=kdu would pass {query: 'kdu'} as props to the SearchUser component.

Try to keep the props function stateless, as it's only evaluated on route changes. Use a wrapper component if you need state to define the props, that way kdu can react to state changes.