How to Use React Router in Your React Application

Photo by Sébastien Jermer on Unsplash

React Router is a library or a package to help you navigate between your React application components. As mentioned in React Router’s Documentation, “React Router is a collection of navigational components that compose declaratively with your application. Whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native, React Router works wherever React is rendering — so take your pick!”

In this blog post, I will show you how to use React Router with a code along for a song library. Let’s get started:

Create a New React Project

$ npx create-react-app react-routes

Install the React-Router Package

$ npm install react-router-dom

Add Some Data

//   ./src/data.jslet songs = [
{
title: 'No Woman, No Cry',
genres: ['Romance', 'Fantasy'],
},
{
title: 'Is This Love',
genres: ['Romance', 'Comedy']
},
{
title: 'Ya Agmal 3oyoon',
genres: ['Romance', 'Fantasy']
}
]
let artists = [
{
name: 'Bob Marley',
songs: ['No Woman, No Cry', 'Is This Love']
},
{
name: 'Amr Diab',
songs: ['Ya Agmal 3oyoon', 'Burg Al 7oot']
}
]
let writers = [
{
name: 'Vincent Ford',
songs: ['No Woman, No Cry', 'Crazy Baldhead']
},
{
name: 'Bob Marley',
movies: ['In This Love']
},
{
name: 'Turky Al Sheekh',
movies: ['Ya Agmal 3oyoon', 'A7la 7aga']
}
]
module.exports = {
songs,
artists,
writers
}

Create the Components

Here are samples of how these components would look like. You can customize it to whatever you like.

// ./src/components/Home.jsimport React from 'react';const Home = () => {
return (
<div>
<h1>Home Page</h1>
</div>
);
};
export default Home;
// ./src/components/Artists.jsimport React from 'react';
import { artists } from '../data';
const Artists = () => {
return (
<div>
<h1>Artists Page</h1>
{artists.map((artist, index) => (
<div key={index}>
<h3>Name: {artist.name}</h3>
<p>Songs:</p>
<ul>
{artist.songs.map((song, index) => (
<li key={index}>{song}</li>
))}
</ul>
</div>
))}
</div>
);
};
export default Artists;
// ./src/components/Writers.jsimport React from 'react';
import { writers } from '../data';
const Writers = () => {
return (
<div>
<h1>Writers Page</h1>
{writers.map((writers, index) => (
<div key={index}>
<h3>Name: {writers.name}</h3>
<p>Songs:</p>
<ul>
{writers.songs.map((song, index) => (
<li key={index}>{song}</li>
))}
</ul>
</div>
))}
</div>
);
}
export default Writers
// ./src/components/Songs.jsimport React from 'react';
import { songs } from '../data';
const Songs = () => {
return (
<div>
<h1>Songs Page</h1>
{songs.map((song, index) => (
<div key={index}>
<h3>Name: {song.title}</h3>
<p>Genres:</p>
<ul>
{song.genres.map((genre, index) => (
<li key={index}>{genre}</li>
))}
</ul>
</div>
))}
</div>
);
};
export default Songs;

Add a Navigation Bar

// ./src/components/NavBar.jsimport React from 'react';
import { NavLink } from 'react-router-dom';
const NavBar = () => {
return (
<div className="navbar">
<NavLink to="/">Home</NavLink>
<NavLink to="/songs">Songs</NavLink>
<NavLink to="/writes">Writers</NavLink>
<NavLink to="/artists">Artists</NavLink>
</div>
);
};
export default NavBar;

These are the navigation links to each of the components that we just created. We will be importing this NavBarcomponent inside App.js.

Define the Routes in App.js

Let’s fix App.jsto include those routes:

// ./src/App.jsimport {BrowserRouter as Router, Route} from 'react-router-dom';
import NavBar from './components/NavBar';
import Home from './components/Home';
import Songs from './components/Songs';
import Artists from './components/Artists';
import Writers from './components/Writers';
function App() {
return (
<div>
<Router>
<NavBar />
<Route exact path="/" component={Home} />
<Route exact path="/artists" component={Artists} />
<Route exact path="/writers" component={Writers} />
<Route exact path="/songs" component={Songs} />
</Router>
</div>
);
}
export default App;

You see that we used a Router tag and included our NavBar inside it. After that, we included all our routes by adding the path and the component that it should navigate to. One thing to pay attention to here is the exactflag. If you include the exactflag, it will match the exact path to present the component, however, if you don’t use theexact flag here, it will render the component even if at least part of the path is matched.

Here is a screenshot of how the routes change according to what component is presenting:

Screenshots of application routes

This was how to use React-Router to navigate through your React application components. If you have anything you would like to add, please comment below!

Full stack software engineer. Passionate about making people’s lives better and easier through programming. LinkedIn.com/in/shaqqour

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store