Skip to content

Commit cc907b8

Browse files
committed
migrated server rendering docs
1 parent 594a7b3 commit cc907b8

File tree

3 files changed

+44
-1
lines changed

3 files changed

+44
-1
lines changed

docs/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
- [Route Matching](RouteMatching.md)
66
- [Dynamic Routing](DynamicRouting.md)
77
- [Confirming Navigation](ConfirmingNavigation.md)
8+
- [Server Rendering](Server Rendering.md)
89
- [Glossary](Glossary.md)
910
- [Route](Route.md)
1011
- [Plain Route](Plain Route.md)

docs/RouteMatching.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ A [route](Glossary.md#route) has two attributes that determine whether or not it
44

55
### Nesting
66

7-
React Router uses the concept of nested routes to let you declare nested sets of views that should be rendered when a given URL is invoked. Nested routes are arranged in a tree-like structure. To find a match, React Router traverses the [route config](Glossary.md#routeconfig) depth-first searching for a route that matches the URL.
7+
React Router uses the concept of nested routes to let you declare nested sets of views that should be rendered when a given URL is invoked. Nested routes are arranged in a tree-like structure. To find a match, React Router traverses the [route config](Glossary.md#routeconfig) depth-first searching for a route that matches the URL.
88

99
### Path Syntax
1010

docs/ServerRendering.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
## Server Rendering
2+
3+
Server rendering is a bit different than in a client because you'll want
4+
to:
5+
6+
- Send `500` responses for errors
7+
- Send `30x` responses for redirects
8+
- Fetch data before rendering (and use the router to help you do it)
9+
10+
To facilitate these needs, you drop one level lower than the `<Router/>`
11+
API with
12+
13+
- `createLocation` from the history package
14+
- `match` to match the routes to a location without rendering
15+
- `RoutingContext` for synchronous rendering of route components
16+
17+
It looks something like this with an imaginary JavaScript server:
18+
19+
```js
20+
import createLocation from 'history/lib/createLocation'
21+
import { RoutingContext, match } from 'react-router'
22+
import routes from './routes'
23+
import { renderToString } from 'react-dom/server'
24+
25+
serve((req, res) => {
26+
let location = createLocation(req.url)
27+
match(routes, location, (err, props, redirectInfo) => {
28+
if (redirectInfo)
29+
res.redirect(redirectInfo.path)
30+
else if (err)
31+
res.error(err.message)
32+
else
33+
res.send(renderToString(<RoutingContext {...props}/>))
34+
})
35+
})
36+
```
37+
38+
For data loading, you can use the `props` argument to build whatever
39+
convention you want--like adding static `load` methods to your route
40+
components, or putting data loading functions on the routes, its up to
41+
you.
42+

0 commit comments

Comments
 (0)