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
This is an easy step. All you have to do is to run the convenient create-react-appcommand.
$ npx create-react-app react-routesInstall the React-Router Package
Now that we created the project, let’s install the react-router package by running the following command:
$ npm install react-router-domAdd Some Data
After creating the project, inside ./srcdirectory, create a new file data.js to store some data that we will be using in this project.
// ./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
Let’s create some components that we will be navigating through in this application. Inside ./srccreate a new directory and name it components. We will be adding Home.js, Artists.js, Writers.js, andSongs.js
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
Now that we have all our components, let’s add a navigation bar to all of them. We will be using theNavLinkpackage that comes with react-router-dom. Inside the components directory, create a new file and name it NavBar.js.
// ./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
Even though we have the NavBar, it is not working because we didn’t define the routes. We need to tell our application when the user clicks on a link, to go to the corresponding route. Here is where the react-router-dom comes in handy to define all these routes. Make sure to import BrowserRouter and Route from react-router-dom
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:
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!
