EntrypointContainer w/ react-router

root.tsx

import type { ElementType } from 'react';
import * as React from 'react';
import { useMemo } from 'react';
import { EntryPointContainer, loadEntryPoint } from 'react-relay/hooks';
import type { EntryPoint } from 'react-relay/lib/relay-experimental/EntryPointTypes';
import { matchPath, useResolvedPath } from 'react-router';
import { resolvePath, useLocation } from 'react-router-dom';

import repositoryEntrypoint from './Repository.entrypoint';

interface RouteConfig<Params extends {} = {}, Component extends ElementType = any> {
	path: string;
	entryPoint: EntryPoint<Params, Component>
}

const routes: RouteConfig[] = [
	{ path: '.', entryPoint: repositoryEntrypoint },
];

const useEntrypointRouter = (routes: RouteConfig[]) => {
	const location = useLocation();
	const currentPath = useResolvedPath('.');
	return routes.find(route => matchPath(resolvePath(route.path, currentPath.pathname).pathname, location.pathname))?.entryPoint ?? undefined;
};

const App = () => {
	const currentEntrypointReference = useEntrypointRouter(routes);

	const entryPoint = useMemo(() => loadEntryPoint(
		environmentProvider,
		currentEntrypointReference,
	), [currentEntrypointReference]);


	return <Router>
		{currentEntrypointReference ? <EntryPointContainer
			entryPointReference={entryPoint}
			props={{}}
		/> : null}
	</Router>;
};