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