Export createMemoryHistory in v7

[niksauer]

It would be great if v7 continued to export the createMemoryHistory function, similar to UNSAFE_createBrowserHistory. We currently require this in order to test our custom method for preserving search params, regardless of the interaction method used (i.e. <Link /> or navigate). I'm happy to replace our approach with a createBrowserRouter-native one but I can't seem to find an extension point that gives this same reliable behavior? AFAIK, any alternative would involve manually specifying the destination search string.

function preserveSearchParams(history: History, params: string[]): History {
  function preserve(path: To): To {
    if (typeof path === 'string') {
      path = parsePath(path);
    }

    const previousSearchParams = new URLSearchParams(history.location.search);

    if (Array.from(previousSearchParams.keys()).length === 0) {
      return path;
    }

    const newSearchParams = new URLSearchParams(path.search);

    for (const paramName of params) {
      if (newSearchParams.has(paramName)) {
        // Skip to prevent overwriting new value
        continue;
      }

      const paramValue = previousSearchParams.get(paramName) ?? undefined;

      if (!paramValue) {
        continue;
      }

      newSearchParams.set(paramName, paramValue);
    }

    if (Array.from(newSearchParams.keys()).length === 0) {
      return path;
    }

    return { ...path, search: `?${newSearchParams.toString()}` };
  }

  const oldPush = history.push;
  const oldReplace = history.replace;

  history.push = (path, state) => oldPush.apply(history, [preserve(path), state]);
  history.replace = (path, state) => oldReplace.apply(history, [preserve(path), state]);

  return history;
}

const PreserveSearchParamsBrowserRouter: FunctionComponent = (props) => {
  // ===========
  // Render
  // -----------
  return (
    <HistoryRouter
      history={preserveSearchParams(createBrowserHistory({ window, v5Compat: true }), [
        URLSearchParamName.Client,
      ])}
      {...props}
    />
  );
};

export const TESTING_EXPORT = {
  preserveSearchParams,
};

export default PreserveSearchParamsBrowserRouter;

import {
  UNSAFE_createMemoryHistory as createMemoryHistory,
  HistoryRouterProps,
} from 'react-router';
import { beforeEach, describe, expect, it } from 'vitest';

import { TESTING_EXPORT } from './PreserveSearchParamsBrowserRouter';

const { preserveSearchParams } = TESTING_EXPORT;

type History = HistoryRouterProps['history'];

describe('preserveSearchParams', () => {
  // MARK: - Helper
  let history: History;

  // MARK: - Setup
  beforeEach(() => {
    history = preserveSearchParams(createMemoryHistory(), ['keepA', 'keepC']);
  });

  // MARK: - Test Cases
  it('preserves the specified set of search parameters upon navigation', () => {
    history.push({
      pathname: '/',
      search: `?${new URLSearchParams({ keepA: 'valueA', keepC: 'valueC' }).toString()}`,
    });

    let searchParams = new URLSearchParams(history.location.search);
    expect(Array.from(searchParams.keys())).toEqual(['keepA', 'keepC']);

    history.push({ pathname: '/security' });
    expect(history.location.pathname).toEqual('/security');

    searchParams = new URLSearchParams(history.location.search);
    expect(Array.from(searchParams.keys())).toEqual(['keepA', 'keepC']);
    expect(searchParams.get('keepA')).toEqual('valueA');
    expect(searchParams.get('keepC')).toEqual('valueC');
  });
})

[joaofmartinho]

did you find the best way to test the query params?

[morbidick]

Hi, we have a similar usecase where we test custom SearchParams handling with the help from the HistoryRouter. therefore an export of the History type (which in v6 was compatible with the one from the history package) and createHistoryRouter would be extremely helpful.
Or is there another way to test the resulting location?

[brophdawg11]

'm happy to replace our approach with a createBrowserRouter-native one but I can't seem to find an extension point that gives this same reliable behavior? AFAIK, any alternative would involve manually specifying the destination search string.

Couldn't you achieve this behavior with a small wrapper around Link/useNavigate?

[niksauer]

It could, but would also have to cover NavLink, Navigate and useSearchParams/setSearchParams. Ideally, react-router exposes a hook at the <BrowserRouter />-level for proper defense-in-depth?

[brophdawg11]

What about a root middleware when using createBrowserRouter? https://stackblitz.com/edit/github-xwhxkbb7?file=src%2Fmain.tsx

[niksauer]

@brophdawg11 I just looked into using a middleware but it seems like we don't have access to the current location (i.e. window.location.search) which would be needed in addition to request.url. Am I missing somthing?

export const preserveSearchParamsMiddleware: MiddlewareFunction = ({ request }) => {
  // eslint-disable-next-line no-restricted-properties
  const currentParams = new URLSearchParams(window.location.search); // Undefined
  const nextUrl = new URL(request.url);
  const nextParams = preserveSearchParams(currentParams, new URLSearchParams(nextUrl.searchParams));

  [...]
}

[brophdawg11]

I'm not quite sure why we only exported the one history API as UNSAFE_ and not all 3 in v7 here, so I just opened #14663 to make those consistent. They are still exported as UNSAFE_ so they're not intended to be used for new apps, but more as a tool for apps using these APIs in v6 to help migrate to v7.

If you have use-cases you cannot solve in v7 with the new APIs please feel free to reply here and we can try to figure out a path forward for your app.

[niksauer]

Thanks a lot! I'll give this a try once it lands in the next version 🎄