Route parameters in React - Mini Project: Build & Apply

React Route Parameters

📖 Scenario: You are building a simple React app that shows user profiles based on the URL.Each user has a unique ID in the URL, and the app should read this ID to display the correct profile.

🎯 Goal: Create a React app using React Router that reads a userId from the URL and displays it on the page.

📋 What You'll Learn

Use React Router to define routes

Create a route with a parameter named userId

Create a functional component that reads the userId parameter

Display the userId inside the component

💡 Why This Matters

🌍 Real World

Many web apps show different content based on URL parts, like user profiles or product pages. Route parameters let apps read these parts easily.

💼 Career

Understanding route parameters is essential for frontend developers working with React Router to build dynamic, user-friendly web apps.

1

Set up the basic React Router structure

Create a React component called App that uses BrowserRouter and Routes from react-router-dom. Inside Routes, add a route with path /user/:userId and element <UserProfile />. Also create a placeholder UserProfile component that returns an empty fragment <></>.

React

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function UserProfile() {
  // Your code here
}

function App() {
  return (
    
      
        {/* Your code here */}
      
    
  );
}

export default App

Need a hint?

Remember to import BrowserRouter, Routes, and Route from react-router-dom.

Define the route path exactly as /user/:userId.

2

Add a hook to read the route parameter

Inside the UserProfile component, import and use the useParams hook from react-router-dom. Create a constant called params by calling useParams().

React

import React from 'react';
import { BrowserRouter, Routes, Route, useParams } from 'react-router-dom';

function UserProfile() {
  const params = useParams();
  // Your code here
}

function App() {
  return (
    
      
        } />
      
    
  );
}

export default App

Need a hint?

Import useParams from react-router-dom and call it inside UserProfile.

3

Display the userId parameter in the component

Inside the UserProfile component, return a <div> that shows the text User ID: followed by the value of params.userId.

React

import React from 'react';
import { BrowserRouter, Routes, Route, useParams } from 'react-router-dom';

function UserProfile() {
  const params = useParams();
  // Your code here
}

function App() {
  return (
    
      
        } />
      
    
  );
}

export default App

Need a hint?

Use curly braces {} inside JSX to insert the value of params.userId.

4

Add a link to test the route parameter

In the App component, above Routes, add a <nav> element containing a <a> tag with href "/user/42" and text Go to User 42.

React

import React from 'react';
import { BrowserRouter, Routes, Route, useParams } from 'react-router-dom';

function UserProfile() {
  const params = useParams();
  return User ID: {params.userId};
}

function App() {
  return (
    
      {/* Your code here */}
      
        } />
      
    
  );
}

export default App

Need a hint?

Add a navigation link so you can click and test the route parameter in the browser.