ReactRouterRoute breaks with React Router v6

This library no longer works with React Router v6 (currently in alpha).

Warning: Failed prop type: Invalid prop `children` supplied to `Route`, expected a ReactNode.
    in Route (created by QueryParamProvider)

React Router v6 no longer allows for functions as child components. The following code from this library breaks:

https://github.com/pbeshai/use-query-params/blob/32d79f2a47257723fa8459047b2eab1898a61c59/src/QueryParamProvider.tsx#L183-L194

The new signature of Route in React Router v6 is:

export interface RouteProps {
  caseSensitive?: boolean;
  children?: React.ReactNode;
  element?: React.ReactElement | null;
  path?: string;
}

https://github.com/ReactTraining/react-router/blob/dev/packages/react-router/index.tsx#L235-L240

[pbeshai]

Hi all, finally took some time to see what was needed to get this working. @noah-potter’s suggestion might work too, I didn’t investigate, but an alternative style is available in the examples directory.

https://github.com/pbeshai/use-query-params/tree/master/examples/react-router-6

Update See a TypeScript version here

Perhaps after release I’ll look towards building it into the library, but for now it should give you an idea. The basics repeated here:

import * as React from 'react';
import {
  BrowserRouter,
  Routes,
  Route,
  useNavigate,
  useLocation,
} from 'react-router-dom';
import {
  NumberParam,
  QueryParamProvider,
  useQueryParam,
} from 'use-query-params';

const App = ({}) => {
  return (
    <BrowserRouter>
      {/* adapt for react-router v6 */}
      <QueryParamProvider ReactRouterRoute={RouteAdapter}>
        <Routes>
          <Route path="/" element={<Home />} />
        </Routes>
      </QueryParamProvider>
    </BrowserRouter>
  );
};

/**
 * This is the main thing you need to use to adapt the react-router v6
 * API to what use-query-params expects.
 *
 * Pass this as the `ReactRouterRoute` prop to QueryParamProvider.
 */
const RouteAdapter = ({ children }) => {
  const navigate = useNavigate();
  const location = useLocation();

  const adaptedHistory = React.useMemo(
    () => ({
      replace(location) {
        navigate(location, { replace: true, state: location.state });
      },
      push(location) {
        navigate(location, { replace: false, state: location.state });
      },
    }),
    [navigate]
  );
  return children({ history: adaptedHistory, location });
};

[SimonSchick]

v6 has been released now, any chance of integrating the above into the this library?