# Relay 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 relay-todolist/src/routes.js file and make the following changes:


/**
 * File: relay-todolist/src/routes.js
 */

// ...some lines skipped...

import UserQuery from './common/UserQuery';

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

// ...some lines skipped...

export default (
  <Route path='/' component={App}>
    <IndexRoute component={AllTodos} queries={UserQuery} />
    <Route path='todo/edit/:id' component={EditTodo} queries={UserQuery} />
  </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. Both these routes have a queries prop pointing to the common UserQuery component.

So when you navigate to http://localhost:8080/ the AllTodos component is rendered (as it is an IndexRoute). If you navigate to, for example, http://localhost:8080/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 relay-todolist/src/common/sidebar.js and make the following changes to the ApplicationSidebar component:


/**
 * File: relay-todolist/src/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.


This completes the implementation of the Todo list app. Now, navigate to http://localhost:8080 in your browser to play with the newly created app.