Skip to content

Commit

Permalink
Add Nested Route Example to README.md (#359)
Browse files Browse the repository at this point in the history
* Add Nested Route Example to README.md

* Update README.md

Co-authored-by: Jason Miller <developit@users.noreply.github.com>

* Update README.md

Co-authored-by: Jason Miller <developit@users.noreply.github.com>

* Update README.md

Co-authored-by: Jason Miller <developit@users.noreply.github.com>

* Update README.md

Co-authored-by: Jason Miller <developit@users.noreply.github.com>

Co-authored-by: Jason Miller <developit@users.noreply.github.com>
  • Loading branch information
38elements and developit authored Oct 24, 2020
1 parent f9297f1 commit 2a20ddc
Showing 1 changed file with 46 additions and 3 deletions.
49 changes: 46 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,16 +45,18 @@ If there is an error rendering the destination route, a 404 will be displayed.
Any URL parameters get passed to the component as `props`.

Defining what component(s) to load for a given URL is easy and declarative.
You can even mix-and-match URL parameters and normal `props`.
You can also make params optional by adding a `?` to it.
Querystring and `:parameter` values are passed to the matched component as props.
Parameters can be made optional by adding a `?`, or turned into a wildcard match by adding `*` (zero or more characters) or `+` (one or more characters):

```js
<Router>
<A path="/" />
<B path="/b" id="42" />
<C path="/c/:id" />
<C path="/d/:optional?/:params?" />
<D default />
<D path="/e/:remaining_path*" />
<E path="/f/:remaining_path+" />
<F default />
</Router>
```

Expand Down Expand Up @@ -245,6 +247,47 @@ route('/page-2') // appends a history entry
route('/page-3', true) // replaces the current history entry
```

### Nested Routers

The `<Router>` is a self-contained component that renders based on the page URL. When nested a Router inside of another Router, the inner Router does not share or observe the outer's URL or matches. Instead, inner routes must include the full path to be matched against the page's URL:

```js
import { h, render } from 'preact';
import Router from 'preact-router';

function Profile(props) {
// `props.rest` is the rest of the URL after "/profile/"
return (
<div>
<h1>Profile</h1>
<Router>
<MyProfile path="/profile/me" />
<UserProfile path="/profile/:user" />
</Router>
</div>
);
}
const MyProfile = () => (<h2>My Profile</h2>);
const UserProfile = (props) => (<h2>{props.user}</h2>);

function App() {
return (
<div>
<Router>
<Home path="/" />
<Profile path="/profile/:rest*" />
</Router>
<nav>
<a href="/">Home</a>
<a href="/profile/me">My Profile</a>
<a href="/profile/alice">Alice's Profile</a>
</nav>
</div>
);
}
render(<App />, document.body);
### License
[MIT]
Expand Down

0 comments on commit 2a20ddc

Please sign in to comment.