Skip to content

Commit

Permalink
Introduction change to explain nesting using JSX.
Browse files Browse the repository at this point in the history
  • Loading branch information
mik01aj committed Oct 20, 2015
1 parent f5aa145 commit ca6d6cd
Showing 1 changed file with 12 additions and 2 deletions.
14 changes: 12 additions & 2 deletions docs/Introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,9 @@ React.render((
), document.body)
```

React Router knows how to build nested UI for us, so we don't have to manually figure out which `<Child>` component to render. Internally, the router converts your `<Route>` element hierarchy to a [route config](/docs/Glossary.md#routeconfig). But if you're not digging the JSX you can use plain objects instead:
React Router knows how to build nested UI for us, so we don't have to manually figure out which `<Child>` component to render. For example, for a full path `/about` it would build `<App><About /></App>`.

Internally, the router converts your `<Route>` element hierarchy to a [route config](/docs/Glossary.md#routeconfig). But if you're not digging the JSX you can use plain objects instead:

```js
const routes = {
Expand Down Expand Up @@ -193,7 +195,15 @@ React.render((
), document.body)
```

Now visits to URLs like `inbox/messages/Jkei3c32` will match the new route and nest the UI branch of `App -> Inbox -> Message`.
Now visits to URLs like `inbox/messages/Jkei3c32` will match the new route and build this:

```
<App>
<Inbox>
<Message params={ {id: 'Jkei3c32'} } />
</Inbox>
</App>
```

### Getting URL Parameters

Expand Down

0 comments on commit ca6d6cd

Please sign in to comment.