Routing

Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
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 />.

Example

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 (
<div>
<Router>
<nav>
<ul>
<Routes>
<Route path="/about" element={<About />} />
<Route path="/blog" element={<Blog />} />
<Route path="/contact" element={<Contact />} />
<Route path="/" element={<Home />} />
</Routes>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/projects">Projects</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
</Router>
</div>
);
};
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