Published Jul 29, 2021Updated Apr 10, 2023
Contribute to Docs

In React, routing is most commonly achieved through React Router.

React Router is a third-party library that allow components to be used as routed endpoints within an application. This library comes in three packages:

  • react-router: For core functionality
  • react-router-native: React Native version
  • react-router-dom: Recommended for web applications

Install the newest version with npm:

npm install react-router-dom@latest

The newest version of React Router is v6, which comes with many breaking changes including:

  • Using a <Routes /> component instead of a <Switch /> component for <Route /> configuration.
  • Using the element attribute instead of component when passing a JSX to a <Link />.


Below, a <BrowserRouter/> (aliased as <Router/>) is used to map the navigation <Link/> components to a <Routes/> component. The <Routes/> renders the appropriate <Route> based on the most specific-matching path among all possible matches.

import Home from './Home';
import About from './About';
import Projects from './Projects';
import Contact from './Contact';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
const App = () => {
return (
<Route path="/about" element={<About />} />
<Route path="/blog" element={<Blog />} />
<Route path="/contact" element={<Contact />} />
<Route path="/" element={<Home />} />
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/projects">Projects</Link>
<Link to="/contact">Contact</Link>
const Home = () => {
return <h2>Home</h2>;
const About = () => {
return <h2>About</h2>;
const Projects = () => {
return <h2>Projects</h2>;
const Contact = () => {
return <h2>Contact</h2>;
export default App;

All contributors

Looking to contribute?

Learn React on Codecademy