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


/**
 * File: laravel-todolist/src/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='/todos/: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 /todos/:id route pointing to EditTodo component.

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


/**
 * File: laravel-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='/todos/: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 /todos/: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.

Final steps:

Now that we have completed our frontend and our backend implementation we need to test it out in a browser. Before we do that, we need to seed the database.

To do that, open your terminal and make sure you are in the laravel-todolist working directory. Then SSH into your Virtual Machine:

$ vagrant ssh

Once you are inside the VM, navigate to your laravel-todolist working directory like so:

$ cd laravel-todolist

Once inside, run:

$ php artisan migrate --force

And then exit from the VM:

$ exit

Why did we run the php artisan command from within the VM and not from the host? This is because our database is running within the VM and is not accessible from the host. Hence, we need to run any migrations/data seeding from within the VM itself.

Now, navigate to http://localhost:8000 to see your app in action.