In this blog we will talk about <\/p>\n Configuration<\/strong><\/p>\n [code lang=”javascript”] [code lang=”html”] <\/p>\n [code lang=”html”] <\/p>\n [code lang=”javascript”] var India = React.createClass({ \/\/ Routing Information goes here Link<\/strong>: \u00a0Creates an anchor tag that links to a route in the application. Also gets the\u00a0 [code lang=”javascript”]<\/p>\n <Link to=’india’ params={{"name": "India"}}>India <\/Link><\/p>\n \/\/to:The name of the route to link to, or a full URL. [\/code]<\/p>\n <\/p>\n Route<\/strong>: It\u00a0map routes to your application’s screen hierarchy.<\/p>\n [code lang=”javascript”] run()<\/strong>: It runs your routes, matching them against a location, and then calls back with the next state for you to render.<\/p>\n [code lang=”javascript”] RouteHandler<\/strong>: Component that renders the active child route handler of a parent route handler component. Any time you have nested routes you need to render a <\/p>\n [code lang=”javascript”] \/\/Route is defined as [\/code]<\/p>\n You can try it out yourself on JSFiddle react-routerDemo <\/a>.<\/p>\nreact-router<\/code>. Routing is a dire need in SPA<\/strong>(Single page applications<\/em>), in which we load partial content without asking the server for a complete webpage. React<\/code> is no different in terms of loading only what is required. Routing\u00a0programmatically presents specific content to users based on the URL<\/code> that they are visiting. But, as we add more and more logic to an app, it grows very complex and soon become difficult to manage. Dividing it in components and using routing to load different components, helps in logically bifurcating \u00a0the app and making it more manageable.<\/p>\n
\nbower install react
\nbower install react-router
\n[\/code]<\/p>\nOr if you are not using bower, use the following CDN links<\/strong>:<\/pre>\n
\nhttps:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/0.13.3\/react.min.js
\nhttps:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/0.13.3\/JSXTransformer.js
\nhttps:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react-router\/0.13.3\/ReactRouter.min.js
\n[\/code]<\/p>\nSetting up your page<\/h2>\n
\n<!DOCTYPE html>
\n<html>
\n<head lang="en">
\n <meta charset="UTF-8">
\n <title><\/title>
\n<\/head>
\n<script src="https:\/\/fb.me\/JSXTransformer-0.13.2.js"\/>
\n<script src="https:\/\/fb.me\/react-with-addons-0.13.2.min.js"\/>
\n<script src="bower_components\/react-router\/build\/global\/ReactRouter.min.js"\/>
\n<script type="text\/jsx" src="router.js"\/>
\n<body>
\n <div id="container"><\/div>
\n<\/body>
\n<\/html>
\n[\/code]<\/p>\nBasic example<\/h2>\n
\n(function (React, ReactRouter) {
\n var Link = ReactRouter.Link,
\n Route = ReactRouter.Route,
\n RouteHandler = ReactRouter.RouteHandler;
\n \/\/ List of Components
\n var Parent = React.createClass({
\n render: function () {
\n return (
\n <div>
\n <h2>This is the World.<\/h2>
\n <ul>
\n <li>
\n <Link to=’india’>India <\/Link>
\n <\/li>
\n <li>
\n <Link to=’usa’>USA<\/Link>
\n <\/li>
\n <\/ul>
\n <RouteHandler\/>
\n <\/div>
\n );
\n }
\n });<\/p>\n
\n render: function () {
\n return (
\n <div>
\n India is a vast South Asian country with diverse terrain \u2013 from Himalayan peaks to Indian Ocean coastline \u2013 and history reaching back 5 millennia.
\n In the north, Mughal Empire landmarks include Delhi\u2019s Red Fort complex, massive Jama Masjid mosque and Agra\u2019s iconic Taj Mahal mausoleum.
\n <RouteHandler\/>
\n <\/div>
\n );
\n }
\n });
\n var USA = React.createClass({
\n render: function () {
\n return (
\n <div>
\n The Americas, or America are the combined continental landmasses of North America and South America.
\n Along with their associated islands, they cover 8.3% of the Earth’s total surface area.
\n <RouteHandler\/>
\n <\/div>
\n );
\n }
\n });<\/p>\n
\n var container = document.getElementById(‘container’);
\n var Routes = (
\n <Route name="parent" path="\/" handler={Parent}>
\n <Route name="india" path="\/country\/india" handler={India}\/>
\n <Route name="usa" path="\/country\/usa" handler={USA} \/>
\n <\/Route>
\n );
\n ReactRouter.run(Routes, function (Handler) {
\n React.render(<Handler\/>, container);
\n });
\n}(window.React, window.ReactRouter));
\n[\/code]<\/p>\nactive<\/code> class automatically when the route matches. If you change the path of your route,\u00a0you don’t have to change your links.<\/p>\n
\n \/\/params: This props is used for passing parameter into url
\n \/\/query: It is used for passing parameter as query string into url<\/p>\n
\n <Route name="parent" path="\/" handler={Parent}>
\n <Route name="india" path="\/country\/india" handler={India}\/>
\n <Route name="usa" path="\/country\/usa" handler={USA} \/>
\n <\/Route>
\n[\/code]<\/p>\n
\nReactRouter.run(Routes, function (Handler) {
\n React.render(<Handler\/>,null);
\n });
\n[\/code]<\/p>\nRouteHandler<\/code> to get the UI to nest.<\/p>\nPassing parameters to Routes<\/h2>\n
\n<div>
\n <Link to=’india’ params:{name:"India"}>India <\/Link>
\n \/\/Passing parameter in query string
\n <Link to=’india’ query:{name:"India"}>India <\/Link>
\n<\/div><\/p>\n
\n <Route name="india" path="\/country\/:name" handler={India}\/><\/p>\n