How can I implement nested routes in React Router?

How can I implement nested routes in React Router?

To implement nested routes in React Router, you can use the <Route> component inside another <Route>. Here's a basic example:

<Route path="/parent">
  <ParentComponent>
    <Route path="/child" component={ChildComponent} />
  </ParentComponent>
</Route>

This way, when you navigate to /parent/child, the ChildComponent will render inside ParentComponent.

What about route parameters? How do I handle them?

You can handle route parameters by defining them in the route path using a colon. For example:

<Route path="/user/:id" component={UserComponent} />

In UserComponent, you can access the id parameter using props.match.params.id.

Can I use hooks with React Router?

Yes, React Router provides hooks like useParams, useHistory, and useLocation to work with routing in functional components. For example:

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

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