From 6b433f9221216f57676b40c881b4d30ca0132e2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Jano=C5=A1=C3=ADk?=
 <ondrej.janosik@scrive.com>
Date: Sat, 6 Apr 2024 00:25:25 +0200
Subject: [PATCH 1/4] Document Route wrapper for typescript

---
 README.md | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/README.md b/README.md
index 9a12a1d..06a9773 100644
--- a/README.md
+++ b/README.md
@@ -36,6 +36,11 @@ render(<Main />, document.body);
 
 If there is an error rendering the destination route, a 404 will be displayed.
 
+#### Caveats
+
+Because the `path` and `default` props are used by the router, it's better to avoid
+same props in your components.
+
 ### Handling URLS
 
 :information_desk_person: Pages are just regular components that get mounted when you navigate to a certain URL.
@@ -276,6 +281,38 @@ function App() {
 render(<App />, document.body);
 ```
 
+### Typescript Routes
+
+In some cases, depending on your TypeScript configuration, you may encounter
+an error that prevents you from passing the `path` or `default` props to your components:
+
+```tsx
+error TS2322: Type '{ path: string; myProps: MyProps }' is not assignable to type 'IntrinsicAttributes & MyProps'.
+  Property 'path' does not exist on type 'IntrinsicAttributes & MyProps'.
+
+      <MyComponent path="/component"
+                         ~~~~
+```
+
+In such cases, you can wrap your components in `<Route />`. This will also accept your component's
+props. Keep in mind that both `path` and `default` props are passed down to your component.
+
+```tsx
+import {Router, Route} from 'preact-router';
+
+function App() {
+  let users = getUsers();
+
+  return (
+    <Router>
+      <Route component={Home} path="/" />
+      {/* Route will accept any props of `component` type */}
+      <Route component={Users} users={users} path="/users"  />
+    </Router>
+  );
+}
+```
+
 ### License
 
 [MIT](./LICENSE)

From 627d708cf51d168090a851e82547e454fd0cbbb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Jano=C5=A1=C3=ADk?=
 <5196749+zlondrej@users.noreply.github.com>
Date: Sat, 6 Apr 2024 03:48:33 +0200
Subject: [PATCH 2/4] Apply suggestion

Co-authored-by: Ryan Christian <33403762+rschristian@users.noreply.github.com>
---
 README.md | 26 ++++++--------------------
 1 file changed, 6 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index 06a9773..240c52d 100644
--- a/README.md
+++ b/README.md
@@ -281,38 +281,24 @@ function App() {
 render(<App />, document.body);
 ```
 
-### Typescript Routes
+### `Route` Component
 
-In some cases, depending on your TypeScript configuration, you may encounter
-an error that prevents you from passing the `path` or `default` props to your components:
+Alternatively to adding the router props (`path`, `default`) directly to your component, you may want to use the `Route` component we provide instead. This tends to appease TypeScript, while still passing down the routing props into your component for use.
 
-```tsx
-error TS2322: Type '{ path: string; myProps: MyProps }' is not assignable to type 'IntrinsicAttributes & MyProps'.
-  Property 'path' does not exist on type 'IntrinsicAttributes & MyProps'.
-
-      <MyComponent path="/component"
-                         ~~~~
-```
-
-In such cases, you can wrap your components in `<Route />`. This will also accept your component's
-props. Keep in mind that both `path` and `default` props are passed down to your component.
-
-```tsx
-import {Router, Route} from 'preact-router';
+```js
+import { Router, Route } from 'preact-router';
 
 function App() {
   let users = getUsers();
 
   return (
     <Router>
-      <Route component={Home} path="/" />
+      <Route path="/" component={Home} />
       {/* Route will accept any props of `component` type */}
-      <Route component={Users} users={users} path="/users"  />
+      <Route path="/users" component={Users} users={users}   />
     </Router>
   );
 }
-```
-
 ### License
 
 [MIT](./LICENSE)

From cecf084d0202701939f1045fa21ceeb12e9f352d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Jano=C5=A1=C3=ADk?=
 <5196749+zlondrej@users.noreply.github.com>
Date: Sat, 6 Apr 2024 03:50:27 +0200
Subject: [PATCH 3/4] Fix badly applied suggestion

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 240c52d..e2f7321 100644
--- a/README.md
+++ b/README.md
@@ -299,6 +299,8 @@ function App() {
     </Router>
   );
 }
+```
+
 ### License
 
 [MIT](./LICENSE)

From 34eed6b2d576b36671587bd87ed9788eac780747 Mon Sep 17 00:00:00 2001
From: Ryan Christian <33403762+rschristian@users.noreply.github.com>
Date: Sat, 6 Apr 2024 00:38:44 -0500
Subject: [PATCH 4/4] Update README.md

---
 README.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/README.md b/README.md
index e2f7321..d97ef12 100644
--- a/README.md
+++ b/README.md
@@ -38,8 +38,7 @@ If there is an error rendering the destination route, a 404 will be displayed.
 
 #### Caveats
 
-Because the `path` and `default` props are used by the router, it's better to avoid
-same props in your components.
+Because the `path` and `default` props are used by the router, it's best to avoid using those props for your component(s) as they will conflict.
 
 ### Handling URLS