In React, dynamic routes and parameters are typically implemented using React Router. Here's how you can set up dynamic routes and capture route parameters.
1. Install React Router
First, you need to install react-router-dom:
npm install react-router-dom
2. Basic Setup
In your App.js (or main component), wrap your routes with the BrowserRouter and define your routes using Route.
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './components/Home';
import UserProfile from './components/UserProfile';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
{/* Dynamic route with parameter */}
<Route path="/user/:id" element={<UserProfile />} />
</Routes>
</Router>
);
}
export default App;
3. Creating Components
Here, UserProfile is a component that captures the dynamic parameter :id from the route. You can access this parameter using useParams().
// UserProfile.js
import React from 'react';
import { useParams } from 'react-router-dom';
const UserProfile = () => {
const { id } = useParams();
return (
<div>
<h1>User Profile</h1>
<p>User ID: {id}</p>
</div>
);
};
export default UserProfile;
4. Navigating Between Routes
To navigate between routes, use the Link component from react-router-dom.
import { Link } from 'react-router-dom';
const Home = () => {
return (
<div>
<h1>Home Page</h1>
<Link to="/user/1">Go to User 1's Profile</Link>
</div>
);
};
export default Home;
Key Points
- Dynamic segments in URLs are defined with a colon (
:id). - Use
useParams()to access route parameters in a component. - Use
RoutesandRouteto define and manage different routes.
Top comments (0)