Routing
Anonymous contributor
Anonymous contributor3071 total contributions
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 functionalityreact-router-native
: React Native versionreact-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 ofcomponent
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
- Anonymous contributorAnonymous contributor3071 total contributions
- BrandonDusch580 total contributions
- tefyfernandez13 total contributions
- r3vert2 total contributions
- christian.dinh2476 total contributions
- Anonymous contributor
- BrandonDusch
- tefyfernandez
- r3vert
- christian.dinh
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.