Update context example for react-router v4 beta (#8889)
* Update context example for react-router@4.0.0-beta.1 * Style nits
MICHAEL JACKSON committed
Jan 30, 2017 at 09:36 UTC
564fa646262300683e2c0212fe12bcb0ae5e7daf
1 file changed
+9
-7
docs/docs/context.md
+9
-7
@@ -108,9 +108,11 @@ If `contextTypes` is not defined, then `context` will be an empty object.
108
109
## Parent-Child Coupling
110
111
-Context can also let you build an API where parents and children communicate. For example, one library that works this way is [React Router V4](https://react-router.now.sh/basic):
111
+Context can also let you build an API where parents and children communicate. For example, one library that works this way is [React Router V4](https://reacttraining.com/react-router):
112
113
```javascript
114
+import { Router, Route, Link } from 'react-router-dom';
115
+
116
const BasicExample = () => (
117
<Router>
118
<div>
@@ -120,17 +122,17 @@ const BasicExample = () => (
122
<li><Link to="/topics">Topics</Link></li>
123
</ul>
124
123
- <hr/>
125
+ <hr />
126
125
- <Match exactly pattern="/" component={Home} />
126
- <Match pattern="/about" component={About} />
127
- <Match pattern="/topics" component={Topics} />
127
+ <Route exact path="/" component={Home} />
128
+ <Route path="/about" component={About} />
129
+ <Route path="/topics" component={Topics} />
130
</div>
131
</Router>
130
-)
132
+);
133
```
134
133
-By passing down some information from the `Router` component, each `Link` and `Match` can communicate back to the containing `Router`.
135
+By passing down some information from the `Router` component, each `Link` and `Route` can communicate back to the containing `Router`.
136
137
Before you build components with an API similar to this, consider if there are cleaner alternatives. For example, you can pass entire React component as props if you'd like to.
138