React Router
JavaScript / React JS

Routing in React JS using react-router-dom

React Router

In this tutorial I will explain about Routing in React JS and how to use react-router-dom for routing/navigation in a react application/website. Assuming that you already have knowledge about components in React JS and how to create them.

Let’s start learning about Routing in React JS

The first thing you have to do is install react-router-dom by using the given command to use routing in react js.

npm install react-router-dom --save

After installing react-router-dom we will create 4 components (Header.js, Home.js, About.js, Contact.js).

The header component will contain a horizontal menu to navigate to Home, About or Contact pages.

Header.js

import React from 'react';
import {Link} from 'react-router-dom';
function Header() {
	return (
		<ul>
			<li>
				<Link to="/">Home</Link>
			</li>
			<li>
				<Link to="/about">About</Link>
			</li>
			<li>
				<Link to="/contact">Contact</Link>
			</li>
		</ul>
	);
}
export default Header;

In our Header component we have imported Link from react-router-dom to use Link functionality. Basically Link is the replacement for anchor tags in react. For example: <Link to=”/about”>About</Link> will render <a href=”/about”>About></a>.

Now we will create a Home component which will be the index (default) page of our application and will display a green box.

Home.js

import React from 'react';
function Home() {
		return (
			<div className="banner"></div>
		);
}
export default Home;

Now we will create our About component which will display a yellow box.

About.js

import React from 'react';
function About() {
		return (
			<div className="banner-about"></div>
		);
}
export default About;

Now we will create our Contact component which will display a blue box.

Contact.js

import React from 'react';
function Contact() {
		return (
			<div className="banner-contact"></div>
		);
}
export default Contact;

Okay, now we will write some CSS for all of our components.
So open your_project_folder/src/App.css file and write the given CSS.

CSS:

.banner {
  background-color: lightgreen;
  height: 250px;
}
.banner-about {
  background-color: yellow;
  height: 250px;
}
.banner-contact {
  background-color: blue;
  height: 250px;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 50px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
ul > li {
  height: inherit;
  line-height: 50px;
  background-color: #13b658;
  text-align: center;
  flex-grow: 1;
  -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    display: flex;
    justify-content: center;
}
ul > li >a {
  width: 100%;
  color: white;
  text-decoration: none;
  color: white;
}
ul > li >a:hover {
  background-color: #11a34f;
  color: white;
  text-decoration: none;
}

Now open your_project_folder/src/App.js file and write the following code.

App.js

import ReactDOM from 'react-dom';
import React, {Component} from 'react';
import './App.css';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Header from './components/Header';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

class App extends Component {
	render() {
		return (
			<BrowserRouter>
			
			<Header/>
			<Switch>
			<Route path='/' exact component={Home}/>
			<Route path='/about' component={About}/>
			<Route path='/contact' component={Contact}/>
			</Switch>
			
			</BrowserRouter>
		);
	}
}

export default App;

In the App.js file, we have imported BrowserRouter, Route, and Switch from react-router-dom.

BrowserRouter is a router implementation that uses the HTML5 history API (pushState, replaceState, and the popstate event) to keep your UI in sync with the URL.

The route will be used to render a component conditionally based on matching a path to the URL.

Switch will return only the first match of all matching routes.

Example: In App.js the line <Route path=’/about’ component={About} /> means when the URL contains /about then About component will be rendered.

I hope it helps. If you still have any confusion you can ask me in the comments below. I will try to help you. Thanks!

Author

I am a Full Stack Web Developer. I have more than 8 years of experience in the web design and development industry.

Leave a Reply

Your email address will not be published. Required fields are marked *