Adding Routes

Here’s how you can add routes to your app (using React Router):

1
2
3
4
5
6
7
import Foo from './foo.jsx';

addRoute({
name: 'foo',
path: '/foo',
component: Foo
});

If on the other hand you’ve previously registered a component with registerComponent, you can simply specify the componentName property instead:

1
2
3
4
5
addRoute({
name: 'foo',
path: '/',
componentName: 'Foo'
});

Finally, to change the index (/) route, you can just do:

1
2
3
4
5
addRoute({
name: 'foo',
path: '/',
component: Foo
});

Child Routes

You can declare a new route as a child of an existing one using the following syntax:

1
2
3
4
5
addRoute({
name: 'foo',
path: '/',
component: Foo
}, 'nameOfParentRoute');

Custom Layouts

By default, Vulcan will use the Components.Layout component as a layout. However, you can also specify a different layout on a per-route basis:

1
2
3
4
5
6
addRoute({
name: 'foo',
path: '/',
component: Foo,
layoutName: 'AdminLayout'
});

Note that this supposes you’ve previously registered the AdminLayout component using registerComponent.

Dynamic Imports

Vulcan supports dynamically loading specific routes, meaning their content will not be included in the original JavaScript bundle but instead will only be loaded when the user actually visits that route.

The following static route:

1
2
3
4
5
6
7
import Admin from './Admin.jsx';

addRoute({
name: 'admin',
path: '/admin',
component: Admin
});

Can be changed to a dynamic route using import(...):

1
2
3
4
5
6
7
const Admin = import('./Admin.jsx');

addRoute({
name: 'admin',
path: '/admin',
component: Admin
});

Learn more about dynamic imports here.

Overriding Routes

You might sometimes need to override an existing route from another package. To do so, you can simply redeclare a route of the same name. If this is not possible for some reason (for example, it’s a dynamically loaded route that uses a local path), you can also override specific route properties like this:

1
2
3
import { RoutesTable } from 'meteor/vulcan:core';

RoutesTable.admin.layoutName = 'AdminLayout';

Update Callbacks

A common pattern with React Router is running callbacks after the route update (to enable things like custom scrolling behavior, for example).

You can use the router.onUpdate callback hook to add your own callbacks:

1
addCallback('router.onUpdate', sendGoogleAnalyticsRequest);

Alternative Approach

React Router is initialized in the vulcan:routing package, and the routing API lets you add routes without having to modify the package’s code. However, for more complex router customizations you can also disable the vulcan:routing package altogether and replace it with your own React Router code.

Using React Router In Your Components

If you need to access router properties (such as the current route, path, or query parameters) inside a component, you’ll need to wrap that component with the withRouter HoC (higher-order component):

import React, { PropTypes, Component } from 'react';
import { withRouter } from 'react-router'

class SearchForm extends Component{

  render() {
    // this.props.router is accessible
  }
}

export default withRouter(SearchForm);
Edit on GitHub