How do I use route parameters in React Router?

How do I use route parameters in React Router?

You can use route parameters in React Router by defining them in your route path with a colon, like /user/:id. This allows you to access the id parameter in your component.

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

Sure! In your component, you can use the useParams hook from react-router-dom. For example:

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

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

What if I want to use multiple parameters?

You can define multiple parameters in your route like this: /user/:id/post/:postId. Then, in your component, you can access them both using const { id, postId } = useParams();.

Is there a way to validate these parameters?

Yes, you can validate parameters by checking their values in your component. For example, you can use conditional rendering to display an error message if the parameter doesn't meet your criteria.