How to use mwp-router - 10 common examples

const { payload: location } = action;
	const state = store.getState();
	const { referrer = {} } = state.routing;
	// inject request metadata from context, including `store.getState()`
	const requestMetadata = {
		referrer: referrer.pathname || state.config.entryPath || '',
		logout: location.pathname.endsWith('logout'), // assume logout route ends with logout - not currently implemented in any app
		clickTracking: true, // clicks should be tracked with this request
		retainRefs: [],
	};
	const cacheAction = requestMetadata.logout && { type: 'CACHE_CLEAR' };

	const previousQueries = referrer.pathname
		? getMatchedQueries(referrer, state)(findMatches(referrer))
		: [];
	const newQueries = getMatchedQueries(location, state)(findMatches(location));
	if (newQueries.filter(q => q).length === 0) {
		// no valid queries - jump straight to 'complete'
		return [api.complete([])];
	}
	// perform a fast comparison of previous route's serialized queries
	// with the new route's serialized queries. All state refs for
	// _shared_ queries should be retained
	const serializedNew = newQueries.map(JSON.stringify);
	const serializedPrev = previousQueries.map(JSON.stringify);
	const sharedRefs = serializedPrev
		.filter(qJSON => serializedNew.includes(qJSON))
		.map(JSON.parse)
		.map(q => q.ref);
	requestMetadata.retainRefs = sharedRefs;

	return Promise.resolve(

const state = store.getState();
	const { referrer = {} } = state.routing;
	// inject request metadata from context, including `store.getState()`
	const requestMetadata = {
		referrer: referrer.pathname || state.config.entryPath || '',
		logout: location.pathname.endsWith('logout'), // assume logout route ends with logout - not currently implemented in any app
		clickTracking: state.clickTracking,
		retainRefs: [],
	};
	const cacheAction = requestMetadata.logout && { type: 'CACHE_CLEAR' };

	const resolvePrevQueries = referrer.pathname
		? resolveRoutes(referrer).then(getMatchedQueries(referrer))
		: Promise.resolve([]);
	const resolveNewQueries = resolveRoutes(location).then(
		getMatchedQueries(location)
	);

	return Promise.all([resolveNewQueries, resolvePrevQueries]).then(
		([newQueries, previousQueries]) => {
			if (newQueries.filter(q => q).length === 0) {
				// no valid queries - jump straight to 'complete'
				return [api.complete([])];
			}
			// perform a fast comparison of previous route's serialized queries
			// with the new route's serialized queries. All state refs for
			// _shared_ queries should be retained
			const serializedNew = newQueries.map(JSON.stringify);
			const serializedPrev = previousQueries.map(JSON.stringify);
			const sharedRefs = serializedPrev
				.filter(qJSON => serializedNew.includes(qJSON))
				.map(JSON.parse)

return IGNORE_ACTION;
	}
	const { payload: location } = action;
	const state = store.getState();
	const { referrer = {} } = state.routing;
	// inject request metadata from context, including `store.getState()`
	const requestMetadata = {
		referrer: referrer.pathname || state.config.entryPath || '',
		logout: location.pathname.endsWith('logout'), // assume logout route ends with logout - not currently implemented in any app
		clickTracking: true, // clicks should be tracked with this request
		retainRefs: [],
	};
	const cacheAction = requestMetadata.logout && { type: 'CACHE_CLEAR' };

	const previousQueries = referrer.pathname
		? getMatchedQueries(referrer, state)(findMatches(referrer))
		: [];
	const newQueries = getMatchedQueries(location, state)(findMatches(location));
	if (newQueries.filter(q => q).length === 0) {
		// no valid queries - jump straight to 'complete'
		return [api.complete([])];
	}
	// perform a fast comparison of previous route's serialized queries
	// with the new route's serialized queries. All state refs for
	// _shared_ queries should be retained
	const serializedNew = newQueries.map(JSON.stringify);
	const serializedPrev = previousQueries.map(JSON.stringify);
	const sharedRefs = serializedPrev
		.filter(qJSON => serializedNew.includes(qJSON))
		.map(JSON.parse)
		.map(q => q.ref);
	requestMetadata.retainRefs = sharedRefs;

return Promise.resolve([]);
	}
	const { payload: location } = action;
	const state = store.getState();
	const { referrer = {} } = state.routing;
	// inject request metadata from context, including `store.getState()`
	const requestMetadata = {
		referrer: referrer.pathname || state.config.entryPath || '',
		logout: location.pathname.endsWith('logout'), // assume logout route ends with logout - not currently implemented in any app
		clickTracking: state.clickTracking,
		retainRefs: [],
	};
	const cacheAction = requestMetadata.logout && { type: 'CACHE_CLEAR' };

	const resolvePrevQueries = referrer.pathname
		? resolveRoutes(referrer).then(getMatchedQueries(referrer))
		: Promise.resolve([]);
	const resolveNewQueries = resolveRoutes(location).then(
		getMatchedQueries(location)
	);

	return Promise.all([resolveNewQueries, resolvePrevQueries]).then(
		([newQueries, previousQueries]) => {
			if (newQueries.filter(q => q).length === 0) {
				// no valid queries - jump straight to 'complete'
				return [api.complete([])];
			}
			// perform a fast comparison of previous route's serialized queries
			// with the new route's serialized queries. All state refs for
			// _shared_ queries should be retained
			const serializedNew = newQueries.map(JSON.stringify);
			const serializedPrev = previousQueries.map(JSON.stringify);

config: {
						apiUrl: API_ROUTE_PATH,
						baseUrl: host,
						enableServiceWorker,
						requestLanguage,
						supportedLangs,
						initialNow: new Date().getTime(),
						variants: getVariants(state),
						entryPath: url.pathname, // the path that the user entered the app on
						media: getMedia(userAgent, userAgentDevice),
					},
					flags,
				};

				const createStore = getServerCreateStore(
					getRouteResolver(routes, basename),
					middleware,
					request
				);
				return Promise.resolve(createStore(reducer, initialState));
			});

export function resolveAppProps(
	routes: Array,
	reducer: Reducer,
	middleware: Array = []
): Promise {
	const basename = window.APP_RUNTIME.appContext.basename || '';
	const findMatches = getFindMatches(routes, basename);
	const createStore = getBrowserCreateStore(findMatches, middleware);
	const store = createStore(reducer, getInitialState(window.APP_RUNTIME));

	// find the matched routes, and then resolve their components - mutate
	// the route object so that the overall `routes` object contains
	// resolved `component` properties for the current location
	const resolveComponents = (): Promise => {
		// get an array of matched routes
		const matchedRoutes = findMatches(window.location);
		// resolve components in parallel (AJAX chunk requests)
		return Promise.all(
			matchedRoutes.map(matchedRoute => {
				if (matchedRoute.route.getComponent) {
					return matchedRoute.route.getComponent();
				}
				return Promise.resolve(matchedRoute.route.component);

scripts: Array,
	enableServiceWorker: boolean,
	cssLinks: ?(Array | (MWPState => Array)),
}) => {
	const {
		routes,
		reducer,
		middleware,
		scripts,
		cssLinks,
		enableServiceWorker,
	} = renderConfig;
	// set up a Promise that emits the resolved routes - this single Promise will
	// be reused for all subsequent requests, so we're not resolving the routes repeatedly
	// hooray performance
	const routesPromise = resolveAllRoutes(routes);
	return (request: HapiRequest, h: HapiResponseToolkit): Promise => {
		if (!scripts.length) {
			throw new Error('No client script assets specified');
		}

		const appContext = getAppContext(request, enableServiceWorker);

		// create the store with populated `config`
		const initializeStore = resolvedRoutes => {
			const createStore = getServerCreateStore(
				getFindMatches(resolvedRoutes, appContext.basename),
				middleware || [],
				request
			);
			const initialState = { config: appContext };
			return Promise.resolve(createStore(reducer, initialState));

export function resolveAppProps(
	routes: Array,
	reducer: Reducer,
	middleware: Array = []
): Promise {
	const basename = window.APP_RUNTIME.basename || '';
	const resolveRoutes = getRouteResolver(routes, basename);
	const createStore = getBrowserCreateStore(resolveRoutes, middleware);
	const store = createStore(reducer, getInitialState(window.APP_RUNTIME));
	return resolveRoutes(window.location).then(() => ({
		routes,
		store,
		basename,
	}));
}

const initializeStore = resolvedRoutes => {
			const createStore = getServerCreateStore(
				getFindMatches(resolvedRoutes, appContext.basename),
				middleware || [],
				request
			);
			const initialState = { config: appContext };
			return Promise.resolve(createStore(reducer, initialState));
		};

const resolveSideEffects = () => ({
	head: Helmet.rewind(),
	redirect: Redirect.rewind(),
	forbidden: Forbidden.rewind(),
	notFound: NotFound.rewind(),
});