Routing in React App

Posted By : Chandan Lunthi | 23-Oct-2017

Reactjs always a great library of the javascript to build performance optimized application. Still development time for react app is quite large then other framework likes of angular, ember.

Bigger application bets on react js for the performace, speed,  consistency.

Here is an example of the How to do routing on the react app.

 

  • You first need to install 'react-router' library by cli
  • Import Router, Route, Link, browserHistory, IndexRoute from the same package
  • Define routing and stateful component inside render method E.G.
  •  

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './components/App/App';

import Login from './components/App/login/login';

import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router';

import registerServiceWorker from './registerServiceWorker';

ReactDOM.render((

<Router history={browserHistory}>

<Route path="/" component={App}/>

<Route path="/login" component={Login}/>

<Route path="*" component={App} /> </Router> ),

document.getElementById('root')); registerServiceWorker();

About Author

Author Image
Chandan Lunthi

Chandan is the self-motivated person and has expertise in technologies. Chandan likes to sign and MMA fighter.

Request for Proposal

Name is required

Comment is required

Sending message..