React-router for navigation

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.

Installation:

  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:

<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';

  render(
    <Provider>
      <BrowserRouter>
        <div>
          <Route exact path="/" component={Home} />
          <Route path="/about-us” component={AboutUs} />
        </div>
      </BrowserRouter>
    </Provider>,
      document.querySelector('.body')
  );
  
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
history:

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
location:

It represents the current app location

match: 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’ params.match.id’
  • isExact : return true if url exactly watched
  • path : path pattern
  • url : matched portion of URL
withRouter:

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:

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

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

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


Need any Help in your Project?Let's Talk

Latest Comments
Related Articles
Understanding ReactJs Component, State and Props

ReactJs is populer JS script library for building User Interface. It's components are reusable and efficiently manages the data that changes over time. In this ...

Continue Reading...
React Component Lifecycle methods

React provides some specific methods which are executed when specific condition triggered in component. basically these methods are divided into 3 parts mounting component, updating ...

Continue Reading...
open source packages

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