As we've already created HTML, now we need to add a Bootstrap navbar component in bootstrap-navbar.js that we created earlier.

For configuring the routing, let's create one component in routing.js that will be in sync with the URL:

var homePage = React.createClass({ 
    render: function() { 
        return (<h1>Home Page</h1>); 
    } 
}); 
ReactDOM.render(( 
    <homePage /> 
), document.getElementById('main')); 

Open it in your browser and here is how it looks:

Let's add the Router to render our homePage component with the URL:

ReactDOM.render(( 
    <Router> 
        <Route path="/" component={homePage} /> 
    </Router> 
), document.getElementById('main'));  

In the preceding example, using the <Route> tag defines a rule where visiting the home page will render the homePage component into the 'main'. As we already know, the React router used JSX to configure the router. <Router> and <Route> both are different things. The <Router> tag should always be the primary parent tag that wraps the multiple URLs with the <Route> tag. We can declare multiple <Route> tags with attribute components that make your UI in-sync. When the history changes, the <Router> will render the component with the matching URL:

ReactDOM.render(( 
    <Router> 
        <Route path="/" component={homePage} /> 
        <Route path="/edit" component={Edit} /> 
        <Route path="/alltickets" component={allTickets} /> 
        <Route path="/newticket" component={addNewTicket} /> 
    </Router> 
), document.getElementById('main'));

It looks very simple and clear that the router will switch the routes with the view without making a request to the server and render them into the DOM.