URL Parameters with React Router v6
In this article, we’ll show you how to set URL parameters with React Router v6. In the previous article, we have explained how to add URL parameters in React Router version 5.
Here, we’ll create an example using React Hooks.
Checkout more articles on ReactJS
Demo Application
Steps to add URL Parameters with React Router v6
- Project structure
- Setup the React project
- Add dependencies
- Add URL parameters
- Add support for Optional parameters
- Implement a Not Found (404) Route
- Output
1. Project structure
In this example, we’ll refer the following project structure for parameters routing using React Router version6.
- url-params-react-router-v6
- node_modules
- public
- index.html
- src
- About.js
- App.js
- Contact.js
- Home.js
- index.css
- index.js
- NotFound.js
- package-lock.json
- package.json
- README.md
2. Setup the React project
To setup the React project, use the create-react-app NPM package. Run the following command.
1 | npx create-react-app url-params-react-router-v6 |
3. Add dependencies
Now, we’ll install the react-router-dom by running the following command.
1 | npm i react-router-dom |
Once the package has been installed, you can see the following versions of react and react-router-dom by looking at the dependencies versions in the package.json file.
4. Add URL parameters
Your routes may be defined as shown below to add the URL parameters.
1 2 3 4 5 6 | <BrowserRouter> <Routes> // ... <Route path="about/:id" element={<About />} /> </Routes> </BrowserRouter> |
We have to use the useParams hook to access the URL parameter in the component.
1 2 3 4 5 6 | import { useParams } from 'react-router-dom'; // ... // ... const { id } = useParams(); |
5. Add support for Optional parameters
We need to define the routes as shown below in order to provide optional parameters.
1 2 3 4 | <Route path="about"> <Route index element={<About />} /> <Route path=":id" element={<About />} /> </Route> |
6. Implement a Not Found (404) Route
We must specify the route path as a * as follows in order to add a not found route.
1 | <Route path="*" element={<NotFound />} /> |
7. Output
Let’s put everything in place and check out the result.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | import React from 'react'; import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'; import Home from './Home'; import About from './About'; import Contact from './Contact'; import NotFound from './NotFound'; function App() { return ( <BrowserRouter> <div> <h3>URL Parameters with React Router v6 - <a href="https://cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h3> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/about/1">About 1</Link></li> <li><Link to="/about/2">About 2</Link></li> <li><Link to="/contact">Contact</Link></li> </ul> <Routes> <Route path="*" element={<NotFound />} /> <Route path="/" element={<Home />} /> <Route path="about"> <Route index element={<About />} /> <Route path=":id" element={<About />} /> </Route> <Route path="contact" element={<Contact />} /> </Routes> </div> </BrowserRouter> ); } export default App; |
1 2 3 4 5 6 7 8 9 10 | import React from 'react'; const Home = () => { return <div> <h4>Home</h4> <p>This is Home page.</p> </div> } export default Home; |
1 2 3 4 5 6 7 8 9 10 | import React from 'react'; const Contact = () => { return <div> <h4>Contact</h4> <p>This is Contact page.</p> </div> } export default Contact; |
1 2 3 4 5 6 7 8 9 10 11 12 13 | import React from 'react'; import { useParams } from 'react-router-dom'; const About = () => { const { id } = useParams(); return <div> <h4>About</h4> <p>This is About page.</p> {id ? <b>ID: {id}</b> : <i>ID is optional.</i>} </div> } export default About; |
1 2 3 4 5 6 7 8 9 10 | import React from 'react'; const NotFound = () => { return <div> <h2 style={{ marginBottom: 0 }}>404</h2> <h4 style={{ marginTop: 0 }}>Page Not Found!</h4> </div> } export default NotFound; |
I hope you find this article helpful.
Thank you for reading. Happy Coding..!!
