Creating Dynamic Route Matching With Parameters

Demonstrate creating routes that match dynamically using path parameters, capturing variable parts of the URL.

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import React from 'react';
import UserPage from './UserPage';
import HomePage from './HomePage';

Import necessary components and pages from react-router-dom and React.

function App() {
  return (
    <Router>
      <Routes>
        <Route path='/' element={<HomePage />} />
        /* Static route for home page */
        <Route path='/user/:userId' element={<UserPage />} />
        /* Dynamic route, capturing userId as a parameter */
      </Routes>
    </Router>
  );
}

Define the App component with a Router wrapping Routes. It includes a static route for the homepage and a dynamic route for user pages, capturing userId from the URL.

export default App;

Export the App component to be used in the application.