# Meteor Tutorial: Defining Routes

Adding routes

Now that we have defined a page for displaying the stored todo items and another for editing the todo item, let us create routes to these pages.

To do that, open imports/routes.js file and make the following changes:


/**
 * File: imports/routes.js
 */

// ...some lines skipped...

/* Pages */
import AllTodos from './routes/AllTodos';
import EditTodo from './routes/EditTodo';

// ...some lines skipped...

export default (
  <Route path='/' component={App}>
    <IndexRoute component={AllTodos} />
    <Route path='/todo/edit/:id' component={EditTodo} />
  </Route>
);


In the above code, we replaced our import to ./routes/Home with ./routes/AllTodos and ./routes/EditTodo. We then define two routes: an IndexRoute pointing to the AllTodos component and a /todo/edit/:id route pointing to EditTodo component.

So when you navigate to http://localhost:3000/ the AllTodos component is rendered (as it is an IndexRoute). If you navigate to, for example, http://localhost:3000/todo/edit/zxfjh4623saf, the EditTodos component is rendered with { id: "zxfjh4623saf" }.


Creating SidebarNavItems

Now that we have defined routes for both pages, we need to create corresponding Sidebar items. To do that open imports/common/sidebar.js and make the following changes to the ApplicationSidebar component:


/**
 * File: imports/common/sidebar.js
 */

// ...some lines skipped...

@withRouter
class ApplicationSidebar extends React.Component {
  handleChange(e) {
    this._nav.search(e.target.value);
  }

  render() {
    return (
      <div>
        <Grid>
          <Row>
            <Col xs={12}>
              <FormControl type='text' placeholder='Search...' onChange={::this.handleChange} className='sidebar-search' style={{border: 'none', background: 'none', margin: '10px 0 0 0', borderBottom: '1px solid #666', color: 'white'}} />
              <div className='sidebar-nav-container'>
                <SidebarNav style={{marginBottom: 0}} ref={(c) => this._nav = c}>

                  { /** Pages Section */ }
                  <div className='sidebar-header'>PAGES</div>

                  <SidebarNavItem glyph='icon-outlined-todolist' name='All Todos' href='/' />
                  <SidebarNavItem glyph='icon-outlined-pencil' name='Edit Todo' href='/todo/edit/:id' />
                </SidebarNav>
              </div>
            </Col>
          </Row>
        </Grid>
      </div>
    );
  }
}

// ...some lines skipped...


In the above code, we define two SidebarNavItems inside a SidebarNav. The first SidebarNavItem points to the IndexRoute (href=/). When you visit the index page this SidebarNavItem is automatically activated.

The second SidebarNavItem points to /todo/edit/:id. Since the href for this SidebarNavItem is a pattern and not a direct route, it is not clickable in the Sidebar. This SidebarNavItem can be activated only by programatically navigating to the page or by directly loading the page in the browser.

For a complete list of all Sidebar features, please refer to this documentation: Sidebar

This completes the Todo list app tutorial. Assuming you already have your Meteor server running, navigate to http://localhost:3000 to play around with the todo list app.