Updated Documentation with examples using props (#12838)

Co-authored-by: davidbielik <[email protected]>
Co-authored-by: Tim Dorr <[email protected]>

Author: 3 people

contributors.yml

@@ -340,3 +340,4 @@
 - yuleicul
 - zeromask1337
 - zheng-chuang
+- sanjai451

docs/start/framework/data-loading.md

@@ -135,6 +135,7 @@ export async function clientLoader({
   params,
 }: Route.ClientLoaderArgs) {
   const res = await fetch(`/api/products/${params.pid}`);
+  const serverData = await serverLoader();
   return { ...serverData, ...res.json() };
 }
 

docs/start/framework/route-module.md

@@ -25,7 +25,7 @@ This guide is a quick overview of every route module feature. The rest of the ge
 
 ## Component (`default`)
 
-Defines the component that will render when the route matches.
+The `default` export in a route module defines the component that will render when the route matches.
 
 ```tsx filename=app/routes/my-route.tsx
 export default function MyRouteComponent() {
@@ -40,6 +40,40 @@ export default function MyRouteComponent() {
 }
 ```
 
+### Props passed to the Component
+
+When the component is rendered, it is provided the props defined in `Route.ComponentProps` that React Router will automatically generate for you. These props include: 
+
+1. `loaderData`: The data returned from the `loader` function in this route module
+2. `actionData`: The data returned from the `action` function in this route module
+3. `params`: An object containing the route parameters (if any).
+4. `matches`: An array of all the matches in the current route tree.
+
+You can use these props in place of hooks like `useLoaderData` or `useParams`. This may be preferrable because they will be automatically typed correctly for the route. 
+
+### Using props
+
+```tsx filename=app/routes/my-route-with-default-params.tsx
+import type { Route } from './+types/route-name'
+
+export default function MyRouteComponent({ 
+  loaderData, 
+  actionData,
+  params, 
+  matches 
+}: Route.ComponentProps) {
+  return (
+    <div>
+      <h1>Welcome to My Route with Props!</h1>
+      <p>Loader Data: {JSON.stringify(loaderData)}</p>
+      <p>Action Data: {JSON.stringify(actionData)}</p>
+      <p>Route Parameters: {JSON.stringify(params)}</p>
+      <p>Matched Routes: {JSON.stringify(matches)}</p>
+    </div>
+  );
+}
+```
+
 ## `loader`
 
 Route loaders provide data to route components before they are rendered. They are only called on the server when server rendering or during the build with pre-rendering.