Getting RAW (without URL decode) params from react-router-dom.

useRawParams.js

import { useContext, useMemo } from 'react';
// eslint-disable-next-line camelcase
import { UNSAFE_RouteContext, useParams } from 'react-router-dom';

/**
 * Temporary workaround to get RAW params from react-router-dom v.6
 * Should hanndle most of the simple cases like /:myVar/someVar/:mySecondVar
 * @returns {Object} The same as useParams from react-router-dom but returns RAW (not URL decoded) paramters
 */
export default function useRawParams() {
  const params = useParams();
  const { matches } = useContext(UNSAFE_RouteContext);
  const rawParams = useMemo(() => {
    const retVal = {};
    const match = matches[matches.length - 1];
    const { pathname, route: { path: pathTemplate } } = match;
    const pathParts = pathname.split('/');
    pathTemplate
      .split('/')
      .forEach((pt, idx) => {
        if (pt[0] === ':') {
          retVal[pt.slice(1)] = pathParts[idx];
        }
      });
    return retVal;
  }, [params]);
  return rawParams;
}