Route with query params (react router v4)

route_with_query_params.tsx

import * as React from 'react';
import { Redirect, Route, RouteComponentProps } from 'react-router';

type RouteWithQueryParamsProps<R extends string, O extends string> = {
  path: string;
  params: readonly ({
    name: R;
    required: true;
  } | {
    name: O;
    required?: false;
  })[];
  fallbackPath: string;
  Component: React.ComponentType<Record<R, string> & Record<O, string | undefined> & RouteComponentProps<any>>;
};

export const RouteWithQueryParams = <R extends string, O extends string>(props: RouteWithQueryParamsProps<R, O>) => {
  return (
      <Route path={props.path}>
        {(routeProps) => {
          const params = new URLSearchParams(routeProps.location.search);

          const requiredParams = {} as Record<R, string>;
          const optionalParams = {} as Record<O, string | null>;

          for (const param of props.params) {
            const value = params.get(param.name);

            if (param.required) {
              if (value != null) {
                requiredParams[param.name] = value;
              } else {
                return <Redirect to={props.fallbackPath}/>;
              }
            } else {
              optionalParams[param.name] = value;
            }
          }

        return <props.Component {...routeProps} {...requiredParams} {...optionalParams}/>;
        }}
      </Route>
  );
};