How to use react router in an A12 client app?

Client
1

Is there any A12 project or example app that uses react router? I would like to see some best practices of react routing in A12.

The thing is, react router allows this nesting of Route components, each Router points into a different child component (see here). By doing so, react router supports navigation into a view that is inside another view. This is a similar concept that the A12 client tries to do with the activity nesting, so I wonder how can an app with activities implement a routing mechanism based on the react router?

I found that the A12 client offers some kind of routing with deep linking, but they don’t offer browser history, a feature that react routing offers and we would also like to have.

2

I created a custom solution for our project using the JavaScript History API.
The solution is like a node module with a well defined interface to configure the routes. For example:

export interface RouterConfig {
	route: string;
	callback(params: PathParameters, dispatch: Dispatch): void;
}

export type PathParameters = { [key: string]: string };

export const routerConfig: RouterConfig[] = [
	{
		route: `${getBaseUrl()}#e-designer`,
		callback: (params, dispatch) => {
			dispatch(setExpanded(false));
			dispatch(setSelectedTab({}));
			dispatch(
				createActivityWithInitiatingId({
					activityDescriptor: createVordruckActivityDescriptor(params["vordruckId"]),
				})
			);
			dispatch(
				changeEditorState({
					viewState: params["readonly"] === "true" ? ViewState.READONLY : ViewState.EDIT,
				})
			);
		},
	},
	{
		route: `${getBaseUrl()}#navigator`,
		callback: (_params, dispatch) => {
			dispatch(ApplicationActions.startMainActivityRequested({ feature: "history-navigator" }));
		},
	},
];

Each route loads the data with the proper actions, I also have a listener for popstate events, helper sagas, reducers and of course the main routing module. For more info about the infrastructure behind this, don’t hesitate to contact me, I am also considering the idea to make the solution available for other projects (A12 Addon).