diff --git a/src/routes/solid-router/reference/load-functions/load.mdx b/src/routes/solid-router/reference/load-functions/load.mdx
index fad2c04f52..528dd37dc4 100644
--- a/src/routes/solid-router/reference/load-functions/load.mdx
+++ b/src/routes/solid-router/reference/load-functions/load.mdx
@@ -23,12 +23,6 @@ function loadUser({ params, location }) {
 <Route path="/users/:id" component={User} load={loadUser} />;
 ```
 
-| key      | type                                           | description                                                                                                                                                                                                                                                                                                                                                                 |
-| -------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| params   | object                                         | The route parameters (same value as calling [`useParams()`](/solid-router/reference/primitives/use-params) inside the route component)                                                                                                                                                                                                                                      |
-| location | `{ pathname, search, hash, query, state, key}` | An object that used to get more information about the path (corresponds to [`useLocation()`](/solid-router/reference/primitives/use-location))                                                                                                                                                                                                                              |
-| intent   | `"initial", "navigate", "native", "preload"`   | Indicates why this function is being called. <ul><li>"initial" - the route is being initially shown (ie page load)</li><li>"native" - navigate originated from the browser (eg back/forward)</li><li>"navigate" - navigate originated from the router (eg call to navigate or anchor clicked)</li><li>"preload" - not navigating, just preloading (eg link hover)</li></ul> |
-
 A common pattern is to export the load function and data wrappers that correspond to a route in a dedicated `route.data.js` file.
 This imports the data functions without loading anything else.
 
@@ -42,5 +36,64 @@ const User = lazy(() => import("/pages/users/[id].js"));
 <Route path="/users/:id" component={User} load={loadUser} />;
 ```
 
-The return value of the `load` function is passed to the page component when called at anytime other than `preload`.
-This initializes things in there, or alternatively the following new Data APIs can be used:
+## Accessing loaded data in the component
+
+### `props.data`
+
+The return value of the `load` function is passed to the page component as a `data` prop when called at anytime other than `preload`.
+
+```js
+//pages/users/[id].jsx
+export default function User(props) {
+	return <p>{props.data().name}</p>;
+}
+```
+
+### Data APIs
+
+Alternatively, the following new Data APIs can be used:
+
+- [`cache`](https://docs.solidjs.com/solid-router/reference/data-apis/cache)
+- [`createAsync`](https://docs.solidjs.com/solid-router/reference/data-apis/create-async)
+
+```js
+import { lazy } from "solid-js";
+import { Route } from "@solidjs/router";
+import { loadUser } from "./pages/users/[id].data.js";
+
+const User = lazy(() => import("./pages/users/[id].js"));
+
+// Pass it in the route definition
+<Route path="/users/:id" component={User} load={loadUser} />;
+```
+
+```js
+//pages/users/[id].data.js
+
+import { cache } from "@solidjs/router";
+
+export const getUser = cache((id) => {
+	/* do loading */
+}, "users");
+export const loadUser = ({ params, location }) => fetchUser(params.id);
+export default loadUser;
+```
+
+```js
+//pages/users/[id].jsx
+
+import { getUser } from "./[id].data.js";
+
+export default function User(props) {
+	const user = createAsync(() => getUser(props.params.id));
+	return <p>{user().name}</p>;
+}
+```
+
+## Props
+
+| key      | type                                           | description                                                                                                                                                                                                                                                                                                                                                                 |
+| -------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| params   | object                                         | The route parameters (same value as calling [`useParams()`](/solid-router/reference/primitives/use-params) inside the route component)                                                                                                                                                                                                                                      |
+| location | `{ pathname, search, hash, query, state, key}` | An object that used to get more information about the path (corresponds to [`useLocation()`](/solid-router/reference/primitives/use-location))                                                                                                                                                                                                                              |
+| intent   | `"initial", "navigate", "native", "preload"`   | Indicates why this function is being called. <ul><li>"initial" - the route is being initially shown (ie page load)</li><li>"native" - navigate originated from the browser (eg back/forward)</li><li>"navigate" - navigate originated from the router (eg call to navigate or anchor clicked)</li><li>"preload" - not navigating, just preloading (eg link hover)</li></ul> |