How do I implement dynamic routes in React Router?

How do I implement dynamic routes in React Router?

To implement dynamic routes in React Router, you can use the :param syntax in your route path. For example, <Route path='/user/:id' component={User} /> allows you to access the id parameter in the User component.

Can you show me an example of how to access that parameter in the component?

Sure! In your User component, you can use the useParams hook from React Router. Here's how:

import { useParams } from 'react-router-dom';

const User = () => {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
};

What if I want to have nested dynamic routes?

For nested dynamic routes, you can define routes within a parent route. For example:

<Route path='/user/:id'>
  <Route path='posts' component={UserPosts} />
</Route>
``` This allows you to access both `id` and the nested route.

Thanks! Is there a way to handle 404 errors for dynamic routes?

Yes! You can add a catch-all route at the end of your routes definition:

<Route path='*' component={NotFound} />
``` This will render the `NotFound` component for any unmatched routes.