Innovate anywhere, anytime Your cloud-based dev studio.

React-Router for Navigation



npm install react-router-dom --save

There are two types of routers: <Browser Router>, <Hash Router>.
The Browser Router is used for dynamic and the Hash Router is used for static websites.

As we are creating a dynamic website we are using < Browser Router >.


<Route> is main component in React router. It is responsible to render some UI when a locations matches to route’s path.

Route render methods:

We have three ways to render something:

  • <Route component>
  • <Roure render>
  • <Route children>

We must use one of these props based on the requirement. Most of the time we use ‘component’ to render a component.

‘render’ is used for inline rendering. ‘children’ works like ‘render’ but here it render even it doesn’t match location.

See the below example:

import { BrowserRouter, Route } from 'react-router-dom';

          <Route exact path="/" component={Home} />
          <Route path="/about-us” component={AboutUs} />

Why did I mension exact to only Home component ?

In react-router V4, if more than one path matches to location then it renders more than one component. Here ‘/’ also matched to ‘/about-us’.
So we need to use it accordingly

Route props:

  • history
  • location
  • match


It manages session history in javascript

Properties and methods of history:

  • length : total no. of entries
  • action : current action (push, replace or pop)
  • location : current location
  • push : pushed new entry onto history
  • replace : replaces current entry
  • go(n) : moves pointer to history stash by 'n' entries
  • goBack : equal to go(-1)
  • goForward ; equal to go(1)
  • block : it prevents navigation


It represents the current app location.


It contain the information about route path matched the url.

  • params: value from URL
  • Ex: url: ‘/:id’ then we will get the dynamid value from url is’’
  • isExact : return true if url exactly watched
  • path : path pattern
  • url : matched portion of URL

With Router:

We can get history properties to a component using withRouter. We need to wrap the component with withRouter.

See the below example:

import React from ‘react’;
  import { withRouter } from ‘react-router-dom’;
  class AB extends React.Component {
    render() {
      return <div> ... </div>;  

  export default withRouter(AB);


<Link> provides the navigation between pages in application. It uses ‘to’ prop to describe the path.

Import { Link } from ‘react-router-dom’;
  const () = > (
      <Link to=’/home’>Home</Link

It can be string or location object(which contains: pathname, search, hash, state). When we give string it converts to location object.

<Link to={{ pathname: ’/home’ }}>Home</Link>