React Router:
Introduction
React Router is a crucial tool for building dynamic, single-page applications in React. It provides a
seamless way to manage navigation, routing, and user interactions within your web application. In this
article, we will explore the fundamentals of React Router, its core features, and how to implement
routing in your React applications.
What is React Router?
React Router is a popular library for managing client-side routing in React applications. It allows you
to create complex, multi-page web applications that feel like traditional websites while still being
single-page applications (SPAs) under the hood. With React Router, you can define and manage routes,
enabling users to navigate through different views of your application without having to request a new
HTML page from the server.
Key Concepts
Before diving into the implementation, let’s understand some essential concepts:
1. Route: A route is a mapping between a URL and a component. When a user visits a specific URL,
React Router renders the corresponding component.
2. Router: The router is the top-level component that provides the routing infrastructure. In React
Router, you typically use BrowserRouter for web applications and HashRouter for static sites.
3. Nested Routes: React Router allows you to nest routes, creating a hierarchy of components. This
is especially useful for layout structures.
4. Link: The Link component enables navigation by creating anchor-like elements that maintain the
application's state.
Implementation
To use React Router in your project, you need to follow these steps:
1. Installation: Begin by installing React Router using npm or yarn:
npm install react-router-dom
2. Set-Up: Open index.js and wrap the App component with it:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
3. Creating the Navbar: create a Navbar.js file in your src folder and add the following code:
import { Link } from "react-router-dom";
const Navbar = () => {
return (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
);
}
export default Navbar
In the above code, we’ve imported Link from react-router-dom, to enable navigation to different
sections of the web app.
4. Create the Pages: Go ahead and create the files: Home, About and Contact. Inside the files, create
the react components and import the Navbar component in each file.
i. Home.js
//Home.js
import React from 'react'
import Navbar from './Navbar'
const Home = () => {
return (
<div>
<Navbar />
<h1>Home</h1>
</div>
)
}
export default Home
ii. About.js
//About.js
import React from 'react'
import Navbar from './Navbar'
const About = () => {
return (
<div>
<Navbar />
<h1>About</h1>
</div>
)
}
export default About
iii. Contact.js
//Contact.js
import React from 'react'
import Navbar from './Navbar'
const Contact = () => {
return (
<div>
<Navbar />
<h1>Contact</h1>
</div>
)
}
export default Contact
5. Create the routes in App.js: Open App.js and import Routes, Route, from react-router-dom.
Import Home, About, and Contact components as well.
//App.js
import { Route, Routes } from 'react-router-dom';
import './App.css';
import Home from './Home';
import About from './About';
import Contact from './Contact';
function App() {
return (
<div className="App">
</div>
);
}
export default App;
Inside the div element, add the following:
<div className="App">
<Routes>
<Route path='/' element={<Home/>} />
<Route path='/about' element={<About/>} />
<Route path='/contact' element={<Contact/>} />
</Routes>
</div>
The Route elements are wrapped inside Routes.
path represents the URL path to the component it represents.
element describes the component that the path points to.
7. Run the Application: When the app runs, the navbar links will dynamically navigate you to its
corresponding page.
React Router is a powerful tool for managing client-side routing in your React applications. It allows
you to create seamless, dynamic user experiences by handling navigation, route parameters, nested
routes, and more.
