Navigation in React.js Routing

We have an index.js file as −

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter } from 'react-router-dom'
import App from './App'
import AboutUs from './ AboutUs’;
import ContactUs from './ContactUs';
const routs = (
   < BrowserRouter >
      <div>
         <ul>
            <li>
               <Link to="/">Home</Link>
            </li>
            <li>
               <Link to="/ aboutus ">Users</Link>
            </li>
            <li>
               <Link to="/ contactus ">Contact</Link>
            </li>
         </ul>
         <Route exact path="/" component={App} />
         <Route path="/aboutus" component={AboutUs} />
         <Route path="/contactus" component={ContactUs} />
      </div>
   </ BrowserRouter >
);
ReactDOM.render(routs, document.getElementById('root'))

Now, we will have links on the page to navigate instead of manually typing the url in browser.

The Link component provided by react-router-dom helps in creating a anchor tags which will navigate without re-loading the page itself.

If we use the default anchor tag provided by html, it will reload the page while navigating. But as we have only one page index.html and we are just navigating to other jsx component we don’t the page reloads.

How to add 404 page

404 page will be displayed when no path matches in the given routs provided in index.jsx file.

Let's create a page for 404 error.

ErrorPage.jsx

import React from 'react'
const ErrorPage = () => <h1>Page Not found</h1>
export default ErrorPage

we will use the switch component provided by react-router-dom to decide the path.

If no path match found we will default to Errorpage.

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter, Switch } from 'react-router-dom'
import App from './App'
import AboutUs from './AboutUs'
import ContactUs from './ContactUs'
import ErrorPage from './ ErrorPage';
const routs = (
   < BrowserRouter >
      <div>
         <ul>
            <li>
               <Link to="/">Home</Link>
            </li>
            <li>
               <Link to="/aboutus">About us</Link>
            </li>
            <li>
               <Link to="/contactus">Contact us</Link>
            </li>
         </ul>
         <Switch>
            <Route exact path="/" component={App} />
            <Route path="/aboutus" component={AboutUs} />
            <Route path="/contactus" component={ContactUs} />
            <Route component={ErrorPage} />
         </Switch>
      </div>
   </ BrowserRouter >
);
ReactDOM.render(routs, document.getElementById('root'));

In the switch component we have not provided any path to error Page as it is the last component in the switch statement. It is the default statement for switch.

URL parameters

It helps providing us the url parameters dynamically like

<Route path="conatctus/:id" component={ContactUs} />

In index.jsx file

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter, Switch } from 'react-router-dom'
import App from './App'
import AboutUs from './ AboutUs '
import ContactUs from './ ContactUs '
import ErrorPage from './ ErrorPage ';
const routs = (
   < BrowserRouter >
      <div>
         <ul>
            <li>
               <Link to="/">Home</Link>
            </li>
            <li>
               <Link to="/aboutus">About Us</Link>
            </li>
            <li>
               <Link to="/contactus">Contact Us</Link>
            </li>
         </ul>
         <Switch>
            <Route exact path="/" component={App} />
            <Route path="/aboutus/:id" component={AboutUs} />
            <Route path="/contactus" component={ContactUs} />
            <Route component={ErrorPage} />
         </Switch>
      </div>
   </ BrowserRouter >
);
ReactDOM.render(routs, document.getElementById('root'));

Now we have a dynamic value in aboutus url named as id

How to access the url parameter in the component

import React from 'react';
class AboutUs extends React.Component {
render() {
   const { params } = this.props.match
      return (
         <div>
            <h1>About Us</h1>
            <p>{params.id}</p>
         </div>
      )
   }
}
export default AboutUs

The url parameters will be available in the props.We can fetch it like −

const { params } = this.props.match;