diff --git a/src/createElements.js b/src/createElements.js
new file mode 100644
index 00000000..dd85c906
--- /dev/null
+++ b/src/createElements.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import warning from 'warning';
+
+import { isResolved } from './ResolverUtils';
+
+export default function createElements(routeMatches, Components, matchData) {
+ return routeMatches.map((match, i) => {
+ const { route } = match;
+
+ const Component = Components[i];
+ const data = matchData[i];
+
+ const isComponentResolved = isResolved(Component);
+ const areDataResolved = isResolved(data);
+
+ if (route.render) {
+ // Perhaps undefined here would be more correct for "not ready", but
+ // Relay uses null in RelayReadyStateRenderer, so let's follow that
+ // convention.
+ return route.render({
+ match,
+ Component: isComponentResolved ? Component : null,
+ props: areDataResolved ? { ...match, data } : null,
+ data: areDataResolved ? data : null,
+ });
+ }
+
+ if (!isComponentResolved || !areDataResolved) {
+ // Can't render.
+ return undefined;
+ }
+
+ if (!Component) {
+ // Note this check would be wrong on potentially unresolved data.
+ warning(
+ data === undefined,
+ `Route ${i} has data, but no render method or component.`,
+ );
+
+ // Nothing to render.
+ return null;
+ }
+
+ return ;
+ });
+}
diff --git a/src/index.js b/src/index.js
index c95bf688..77fdaf09 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,6 +4,7 @@ export createBaseRouter from './createBaseRouter';
export createBrowserRouter from './createBrowserRouter';
export createConnectedLink from './createConnectedLink';
export createConnectedRouter from './createConnectedRouter';
+export createElements from './createElements';
export createFarceRouter from './createFarceRouter';
export createMatchEnhancer from './createMatchEnhancer';
export createRender from './createRender';
diff --git a/src/resolveElements.js b/src/resolveElements.js
index 16d69a66..777f8de7 100644
--- a/src/resolveElements.js
+++ b/src/resolveElements.js
@@ -1,53 +1,10 @@
import isPromise from 'is-promise';
-import React from 'react';
-import warning from 'warning';
+import createElements from './createElements';
import {
checkResolved, getComponents, getRouteMatches, getRouteValues, isResolved,
} from './ResolverUtils';
-function createElements(routeMatches, Components, matchData) {
- return routeMatches.map((match, i) => {
- const { route } = match;
-
- const Component = Components[i];
- const data = matchData[i];
-
- const isComponentResolved = isResolved(Component);
- const areDataResolved = isResolved(data);
-
- if (route.render) {
- // Perhaps undefined here would be more correct for "not ready", but
- // Relay uses null in RelayReadyStateRenderer, so let's follow that
- // convention.
- return route.render({
- match,
- Component: isComponentResolved ? Component : null,
- props: areDataResolved ? { ...match, data } : null,
- data: areDataResolved ? data : null,
- });
- }
-
- if (!isComponentResolved || !areDataResolved) {
- // Can't render.
- return undefined;
- }
-
- if (!Component) {
- // Note this check would be wrong on potentially unresolved data.
- warning(
- data === undefined,
- `Route ${i} has data, but no render method or component.`,
- );
-
- // Nothing to render.
- return null;
- }
-
- return ;
- });
-}
-
export default async function* resolveElements(match) {
const routeMatches = getRouteMatches(match);