Dynamic routing in React allows you to create routes based on dynamic data or parameters, enabling more flexible and powerful navigation within your application. This is particularly useful for applications that need to render different components based on user input or other dynamic factors.
Setting Up Dynamic Routing with React Router
You’ll typically use the react-router-dom library to implement dynamic routing in React. Here’s a step-by-step guide:
Install React Router: First, you need to install react-router-dom if you haven’t already:
npm install react-router-dom
Create Routes: Define your routes using the component. Use dynamic segments in the path to capture parameters.
JavaScript
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import UserProfile from './UserProfile';
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/user/:id" component={UserProfile} />
</Switch>
</Router>
);
};
export default App;
Access Route Parameters: Use the useParams hook to access dynamic parameters within your components.
JavaScript
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;
Example: Dynamic User Profiles
Let’s create a simple example where we navigate to different user profiles based on the user ID in the URL.
Home Component: This component will have links to different user profiles.
JavaScript
import React from 'react';
import { Link } from 'react-router-dom';
const Home = () => {
return (
<div>
<h1>Home</h1>
<ul>
<li><Link to="/user/1">User 1</Link></li>
<li><Link to="/user/2">User 2</Link></li>
<li><Link to="/user/3">User 3</Link></li>
</ul>
</div>
);
};
export default Home;
UserProfile Component: This component will display the user ID from the URL.
JavaScript
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;
App Component: This component sets up the router and defines the routes.
JavaScript
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import UserProfile from './UserProfile';
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/user/:id" component={UserProfile} />
</Switch>
</Router>
);
};
export default App;
Top comments (0)