Home >Web Front-end >JS Tutorial >Mastering Dynamic Routing in React: Build Flexible and Scalable Applications
Dynamic Routing in React refers to the ability to create routes in your application that depend on data or user interaction, allowing the routes to change dynamically. This makes it possible to render different views based on user input, API responses, or dynamic URL parameters.
Dynamic routing is especially useful when building applications where the routes cannot be pre-defined, such as when the content of a page depends on data fetched from an API or when certain routes depend on the state or actions of the app.
React Router is the go-to library for implementing routing in React applications. It makes dynamic routing simple by allowing route paths and components to change based on data or conditions.
Dynamic Route Parameters:
Programmatic Navigation:
Conditional Routing:
Lazy Loading Routes:
In this example, we'll demonstrate how to create routes with dynamic parameters and conditionally render them based on the URL.
import React from 'react'; import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom'; const UserProfile = () => { const { userId } = useParams(); // Access dynamic parameter from the URL return <h2>User Profile for user: {userId}</h2>; }; const App = () => { return ( <BrowserRouter> <nav> <ul> <li><Link to="/user/1">User 1</Link></li> <li><Link to="/user/2">User 2</Link></li> </ul> </nav> <Routes> <Route path="/user/:userId" element={<UserProfile />} /> {/* Dynamic route */} </Routes> </BrowserRouter> ); }; export default App;
import React from 'react'; import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom'; const Home = () => { const navigate = useNavigate(); const goToUserProfile = (id) => { navigate(`/user/${id}`); }; return ( <div> <h2>Home Page</h2> <button onClick={() => goToUserProfile(1)}>Go to User 1</button> <button onClick={() => goToUserProfile(2)}>Go to User 2</button> </div> ); }; const UserProfile = ({ userId }) => { return <h2>User Profile for user: {userId}</h2>; }; const App = () => { return ( <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/user/:userId" element={<UserProfile />} /> </Routes> </BrowserRouter> ); }; export default App;
import React from 'react'; import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'; const PrivateRoute = ({ isAuthenticated, children }) => { return isAuthenticated ? children : <Navigate to="/login" />; }; const Dashboard = () => <h2>Dashboard - Only accessible when logged in</h2>; const Login = () => <h2>Login Page</h2>; const App = () => { const isAuthenticated = false; // Change this value to test return ( <BrowserRouter> <Routes> <Route path="/login" element={<Login />} /> <Route path="/dashboard" element={ <PrivateRoute isAuthenticated={isAuthenticated}> <Dashboard /> </PrivateRoute> } /> </Routes> </BrowserRouter> ); }; export default App;
import React, { Suspense } from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; // Lazy load components const Home = React.lazy(() => import('./Home')); const Dashboard = React.lazy(() => import('./Dashboard')); const App = () => { return ( <BrowserRouter> <Suspense fallback={<div>Loading...</div>}> <Routes> <Route path="/" element={<Home />} /> <Route path="/dashboard" element={<Dashboard />} /> </Routes> </Suspense> </BrowserRouter> ); }; export default App;
Dynamic routing in React allows for more flexible and interactive applications. By using dynamic route parameters, programmatic navigation, conditional routing, and lazy loading, you can create powerful React apps that adapt based on user interactions or application state. React Router is a robust tool that makes implementing dynamic routing in React easy, allowing you to build complex and scalable applications with ease.
The above is the detailed content of Mastering Dynamic Routing in React: Build Flexible and Scalable Applications. For more information, please follow other related articles on the PHP Chinese website!