How can I use hooks with React Router?

How can I use hooks with React Router?

You can use hooks like useHistory, useLocation, and useParams to manage routing in functional components.

Can you give me an example of using useParams?

Sure! You can use useParams to access route parameters. For example:

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

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

What about useHistory? How does that work?

useHistory allows you to programmatically navigate. For example:

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

function Home() {
  const history = useHistory();
  const handleClick = () => history.push('/about');
  return <button onClick={handleClick}>Go to About</button>;
}

Are there any best practices for using these hooks?

Yes! Always ensure your components are wrapped in a <Router> and avoid using hooks outside of functional components.