Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 AboutUsThe url parameters will be available in the props.We can fetch it like −
const { params } = this.props.match;
6K+ Views
