Skip to content

Commit

Permalink
Document Route wrapper for typescript (#465)
Browse files Browse the repository at this point in the history
* Document Route wrapper for typescript

* Apply suggestion

Co-authored-by: Ryan Christian <33403762+rschristian@users.noreply.github.com>

* Fix badly applied suggestion

* Update README.md

---------

Co-authored-by: Ryan Christian <33403762+rschristian@users.noreply.github.com>
  • Loading branch information
zlondrej and rschristian authored Apr 6, 2024
1 parent 93f1cda commit f4d6d61
Showing 1 changed file with 24 additions and 0 deletions.
24 changes: 24 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@ 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 best to avoid using those props for your component(s) as they will conflict.

### Handling URLS

:information_desk_person: Pages are just regular components that get mounted when you navigate to a certain URL.
Expand Down Expand Up @@ -276,6 +280,26 @@ function App() {
render(<App />, document.body);
```
### `Route` Component
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.
```js
import { Router, Route } from 'preact-router';
function App() {
let users = getUsers();
return (
<Router>
<Route path="/" component={Home} />
{/* Route will accept any props of `component` type */}
<Route path="/users" component={Users} users={users} />
</Router>
);
}
```
### License
[MIT](./LICENSE)

0 comments on commit f4d6d61

Please sign in to comment.