React-router for navigation

In this blog Post you will know clear information about react-router for navigation. if require any support regarding ReactJS Development then contact us at

React router is a React package which helps in navigation.

React router is divided to three packages: react-router, react-router-dom and react-router-native.

As we are building website we have to use react-router-dom.


  npm install react-router-dom --save

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

As we are creating a dynamic website we are using <BrowerRouter>.


<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


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>

Posted On 08 September 2018 By MicroPyramid

About Micropyramid

Micropyramid is a software development and cloud consulting partner for enterprise businesses across the world. We work on python, Django, Salesforce, Angular, Reactjs, React Native, MySQL, PostgreSQL, Docker, Linux, Ansible, git, amazon web services. We are Amazon and salesforce consulting partner with 5 years of cloud architect experience. We develop e-commerce, retail, banking, machine learning, CMS, CRM web and mobile applications.

Need any Help in your Project?Let's Talk


Subscribe To our news letter

Subscribe and Stay Updated about our Webinars, news and articles on Django, Python, Machine Learning, Amazon Web Services, DevOps, Salesforce, ReactJS, AngularJS, React Native.
*We don't provide your email contact details to any third parties