How can I create custom hooks for React Router?

How can I create custom hooks for React Router?

You can create custom hooks in React Router to encapsulate logic for routing. Would you like an example?

Yes, please provide an example of a custom hook.

Sure! Here's a simple custom hook that uses useLocation to get the current path:

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

const useCurrentPath = () => {
  const location = useLocation();
  return location.pathname;
};

This hook returns the current path whenever it's called.

How can I use this custom hook in a component?

You can use it like this:

const MyComponent = () => {
  const currentPath = useCurrentPath();
  return <div>Current Path: {currentPath}</div>;
};

This will display the current path in your component.