Can someone explain how dynamic routing works in Next.js and how I can access route parameters inside my components?
How would you implement dynamic routing in React using React Router?
How to build animations in CSS, specifically using tailwindCSS?
Can anyone help me with this LeetCode problem? Merge Intervals (56)
How to access the correct `this` inside a callback?
asked 1 Year Ago
1 Answers
105 Views
The user is working on a Next.js application and is trying to understand how routing works, especially dynamic routing. Next.js uses a file-based routing system where each file inside the pages folder becomes a route. The user is confused about how to set up routes that include dynamic parameters (like /user/123), how to access these parameters within a page, and how to link between different pages in the app.
Accessing Route Parameters: Inside the page component, you can use the useRouter hook provided by Next.js to access the dynamic route parameter. Here’s how you can do it:
import { useRouter } from 'next/router';
const UserPage = () => {
const router = useRouter();
const { userId } = router.query; // This is how you access the userId
return (
<div>
<h1>User ID: {userId}</h1>
</div>
);
};
export default UserPage;