import {
  useCallbackRouter,
  useNavigate,
} from 'react-use-callback-router';
 
const YourComponent = () => {
  const [userId, setUserId] = useState(null);
  const navigate = useNavigate();
 
  const routes = useMemo(() => ({
    '/users': () => {
      setUserId(null);
      return null;
    },
    '/users/:id': {
      callback: (params) => {
        setUserId(params.id);
        return params.id;
      },
      last: true, // prevent '/users' route from firing
    },
  }), []);
  useCallbackRouter(routes, true);
 
  const handleFirstButtonClick = useCallback(() => {
    // Update the URL manually (callback is not invoked)
    setUserId(1);
    navigate('/users/1');
  }, [navigate]);
 
  const handleSecondButtonClick = useCallback(() => {
    // Let the router update state based on the path
    navigate('/users/:id', { force: true });
  }, [navigate]);
 
  return (
    <div>
      <button onClick={handleFirstButtonClick}>User 1</button>
      <button onClick={handleSecondButtonClick}>User 2</button>
    </div>
  );
};

const [result, evaluate] = useCallbackRouter(routes, initialize);