use-query-params/adapters/react-router-6/index.js

React Hook for managing state in URL query parameters with easy serialization.

import { useContext } from "react";
import {
  UNSAFE_NavigationContext,
  useNavigate,
  useLocation,
  UNSAFE_DataRouterContext
} from "react-router-dom";
const ReactRouter6Adapter = ({
  children
}) => {
  var _a;
  const { navigator } = useContext(UNSAFE_NavigationContext);
  const navigate = useNavigate();
  const router = (_a = useContext(UNSAFE_DataRouterContext)) == null ? void 0 : _a.router;
  const location = useLocation();
  const adapter = {
    replace(location2) {
      navigate(location2.search || "?", {
        replace: true,
        state: location2.state
      });
    },
    push(location2) {
      navigate(location2.search || "?", {
        replace: false,
        state: location2.state
      });
    },
    get location() {
      var _a2, _b, _c;
      return (_c = (_b = (_a2 = router == null ? void 0 : router.state) == null ? void 0 : _a2.location) != null ? _b : navigator == null ? void 0 : navigator.location) != null ? _c : location;
    }
  };
  return children(adapter);
};
export {
  ReactRouter6Adapter
};