Skip to content

Commit 84ed550

Browse files
committed
Merge pull request #2320 from mik01aj/patch-1
Introduction change to explain nesting using JSX.
2 parents 8717c54 + ca6d6cd commit 84ed550

File tree

1 file changed

+12
-2
lines changed

1 file changed

+12
-2
lines changed

docs/Introduction.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,9 @@ render((
143143
), document.body)
144144
```
145145

146-
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:
146+
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>`.
147+
148+
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:
147149

148150
```js
149151
const routes = {
@@ -195,7 +197,15 @@ render((
195197
), document.body)
196198
```
197199

198-
Now visits to URLs like `inbox/messages/Jkei3c32` will match the new route and nest the UI branch of `App -> Inbox -> Message`.
200+
Now visits to URLs like `inbox/messages/Jkei3c32` will match the new route and build this:
201+
202+
```
203+
<App>
204+
<Inbox>
205+
<Message params={ {id: 'Jkei3c32'} } />
206+
</Inbox>
207+
</App>
208+
```
199209

200210
### Getting URL Parameters
201211

0 commit comments

Comments
 (0)