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.