Document Route wrapper for typescript

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)