Replace load with preload (#967)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Sarah <gerrardsarah@gmail.com>

Author: 3 people

src/i18n/dictionaries/en/ui.ts

@@ -28,7 +28,7 @@ export default {
 	"main.nav.section.solid.router": "Solid-Router",
 	"main.nav.section.solid.router.components": "Components",
 	"main.nav.section.solid.router.data.apis": "Data APIs",
-	"main.nav.section.solid.router.load.functions": "Load Functions",
+	"main.nav.section.solid.router.preload.functions": "Preload Functions",
 	"main.nav.section.solid.router.primitives": "Primitives",
 	"main.nav.no.routes": "No routes found",
 

src/routes/guides/routing-and-navigation.mdx

@@ -463,7 +463,7 @@ function preloadUser({ params, location }) {
 The preload function is then passed in the `<Route>` definition:
 
 ```jsx
-<Route path="/users/:id" component={User} preload={loadUser} />
+<Route path="/users/:id" component={User} preload={preloadUser} />
 ```
 
 ---

src/routes/solid-router/guides/migration.mdx

@@ -26,7 +26,7 @@ Removing the second way to define route components to reduce confusion and edge
 ## `data` functions & `useRouteData`
 
 `data` functions & `useRouteData` have been replaced by a load mechanism.
-This allows link hover preloads, since the load function can be run as much as wanted without worrying about reactivity.
+This allows link hover preloads, since the preload function can be run as much as wanted without worrying about reactivity.
 
 This supports deduping/cache APIs which give more control over how things are cached.
 It also addresses TypeScript issues with getting the right types in the Component without `typeof` checks.
@@ -35,32 +35,35 @@ That being said the old pattern can be reproduced by turning off preloads at the
 
 ```js
 import { lazy } from "solid-js";
-import { Route } from "@solidjs/router";
+import { Router, Route } from "@solidjs/router";
 
 const User = lazy(() => import("./pages/users/[id].js"));
 
-// load function
-function loadUser({ params, location }) {
+// preload function
+function preloadUser({ params, location }) {
 	const [user] = createResource(() => params.id, fetchUser);
 	return user;
 }
 
 // Pass it in the route definition
 <Router preload={false}>
-	<Route path="/users/:id" component={User} load={loadUser} />
+	<Route path="/users/:id" component={User} preload={preloadUser} />
 </Router>;
 ```
 
 And then in your component taking the page props and putting them in a Context.
 
 ```js
+import { createContext, useContext } from "solid-js";
+
+const UserContext = createContext();
+
 function User(props) {
-	<UserContext.Provider value={props.data}>
-		{/* my component content  */}
+	<UserContext.Provider value={props.data()}>
+		{/* my component content that includes <UserDetails /> in any depth  */}
 	</UserContext.Provider>;
 }
 
-// Somewhere else
 function UserDetails() {
 	const user = useContext(UserContext);
 	// render stuff

src/routes/solid-router/rendering-modes/ssr.mdx

@@ -14,4 +14,4 @@ import { Router } from "@solidjs/router";
 <Router url={isServer ? req.url : ""} />;
 ```
 
-Solid Router also provides a way to define a `load` function that loads parallel to the routes [render-as-you-fetch](https://epicreact.dev/render-as-you-fetch/).
+Solid Router also provides a way to define a `preload` function that loads parallel to the routes [render-as-you-fetch](https://epicreact.dev/render-as-you-fetch/).