Shared browser history not working with Router from react-router

[ErikParso]

I am trying to make feature app from one of our existing applications and implement history service correctly following documentation and demos. In our feature app we are using standard router from 'react-router' module with history object provided by 's2:history' service.

For example if I open https://localhost:6000?vtp-stock-cars=%2FcarSearch it will open search page as expected. Working for other routes as well.

Problem is when a push something to history or use redirect. Url in browser will change accordingly bud desired route wont catch this path and it will fall to route with path "".

For example if I click on detail item, it will navigate to https://localhost:6000?vtp-stock-cars=%2FcarDetail%2FGBR2509503888572022 but route with path '/carDetail/:id' wont pick it.

Same if I open https://localhost:6000 it will automatically redirect and change url to https://localhost:6000?vtp-stock-cars=%2FcarSearch but route with path '/carSearch' wont match it.

Is there any conception I am missing? Is this browserhistory sharing compatible with router we are using or do I have to replace it with unstable_HistoryRouter from 'react-router-dom'.

History service is configured same way as described in documentation.

const rootLocationTransformer: RootLocationTransformer = {
	getConsumerPathFromRootLocation(rootLocation, historyKey) {
		const searchParams = new URLSearchParams(rootLocation.search);

		return searchParams.get(historyKey);
	},

	createRootLocation(currentRootLocation, consumerLocation, historyKey) {
		const searchParams = new URLSearchParams(currentRootLocation.search);
		searchParams.set(historyKey, history.createPath(consumerLocation));

		return { ...currentRootLocation, search: searchParams.toString() };
	},
};

export const HistoryServiceDefinition: FeatureServiceProviderDefinition<SharedHistoryService, HistoryServiceDependencies> =
	defineHistoryService(rootLocationTransformer, { mode: 'browser' });

Feature app manager

	const featureServiceDefinitions = useMemo(() => [
		HistoryServiceDefinition
	], []);

	const { featureAppManager } = useMemo(() => createFeatureHub(
		'skoda:feature-hub-integrator',
		{
			featureServiceDefinitions,
			moduleLoader: loadAmdModule
		}
	), [featureServiceDefinitions]);

To load feature app we use FeatureAppContainer.