Skip to content

Commit c9ae5e0

Browse files
mjacksonmjackson
committed
Update examples
1 parent 042cffc commit c9ae5e0

File tree

10 files changed

+54
-40
lines changed

10 files changed

+54
-40
lines changed

‎examples/async-data/app.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React from 'react';
2-
import { history } from 'react-router/lib/HashHistory';
2+
import createHistory from 'history/lib/createHashHistory';
33
import { Router, Route, Link, Navigation } from 'react-router';
44
import { loadContacts, loadContact, createContact } from './utils';
55
import AsyncProps from 'react-router/lib/experimental/AsyncProps';
66

7+
var history = createHistory();
8+
79
var Spinner = React.createClass({
810
render() {
911
return (

‎examples/huge-apps/app.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React from 'react';
2-
import { history } from 'react-router/lib/HashHistory';
2+
import createHistory from 'history/lib/createHashHistory';
33
import { Router } from 'react-router';
44
import AsyncProps from 'react-router/lib/experimental/AsyncProps';
55
import stubbedCourses from './stubs/COURSES';
66

7+
var history = createHistory();
8+
79
var rootRoute = {
810
component: AsyncProps,
911

@@ -27,8 +29,8 @@ var rootRoute = {
2729

2830
React.render((
2931
<Router
30-
routes={rootRoute}
3132
history={history}
33+
routes={rootRoute}
3234
createElement={AsyncProps.createElement}
3335
/>
3436
), document.getElementById('example'));

‎examples/master-detail/app.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import React, { findDOMNode } from 'react';
2-
import { history } from 'react-router/lib/HashHistory';
2+
import createHistory from 'history/lib/createHashHistory';
33
import { Router, Navigation, Route, Link } from 'react-router';
44
import ContactStore from './ContactStore';
55

6+
var history = createHistory();
7+
68
var App = React.createClass({
79
getInitialState() {
810
return {

‎examples/passing-props-to-children/app.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
var React = require('react');
2-
import { history } from 'react-router/lib/HashHistory';
3-
var { Router, Route, Link, Navigation } = require('react-router');
1+
import React from 'react';
2+
import createHistory from 'history/lib/createHashHistory';
3+
import { Router, Route, Link, Navigation } from 'react-router';
44

5-
var App = React.createClass({
5+
var history = createHistory();
66

7+
var App = React.createClass({
78
mixins: [ Navigation ],
89

910
getInitialState: function () {
@@ -56,7 +57,6 @@ var App = React.createClass({
5657
});
5758

5859
var Taco = React.createClass({
59-
6060
remove: function () {
6161
this.props.onRemoveTaco(this.props.params.name);
6262
},

‎examples/pinterest/app.js‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import React from 'react';
2+
import createHistory from 'history/lib/createHashHistory';
23
import { Router, Link } from 'react-router';
3-
import HashHistory from 'react-router/lib/HashHistory';
4-
var history = new HashHistory({ queryKey: 'k' });
4+
5+
var history = createHistory();
56

67
var pictures = [
7-
{id: 0, src: 'http://placekitten.com/601/601'},
8-
{id: 1, src: 'http://placekitten.com/610/610'},
9-
{id: 2, src: 'http://placekitten.com/620/620'},
8+
{ id: 0, src: 'http://placekitten.com/601/601' },
9+
{ id: 1, src: 'http://placekitten.com/610/610' },
10+
{ id: 2, src: 'http://placekitten.com/620/620' }
1011
];
1112

1213
var App = React.createClass({
13-
render () {
14+
render() {
1415
return (
1516
<div>
1617
<h1>Pinterest Style Routes</h1>
@@ -33,7 +34,6 @@ var App = React.createClass({
3334
});
3435

3536
var Feed = React.createClass({
36-
3737
overlayStyles: {
3838
position: 'fixed',
3939
top: 30,
@@ -46,16 +46,13 @@ var Feed = React.createClass({
4646
background: '#fff'
4747
},
4848

49-
render () {
49+
render() {
5050
return (
5151
<div>
5252
<div>
5353
{pictures.map(picture => (
54-
<Link
55-
to={`/pictures/${picture.id}`}
56-
state={{fromFeed: true}}
57-
>
58-
<img style={{margin: 10}} src={picture.src} height="100"/>
54+
<Link key={picture.id} to={`/pictures/${picture.id}`} state={{ fromFeed: true }}>
55+
<img style={{ margin: 10 }} src={picture.src} height="100" />
5956
</Link>
6057
))}
6158
</div>
@@ -70,7 +67,7 @@ var Feed = React.createClass({
7067
});
7168

7269
var FeedPicture = React.createClass({
73-
render () {
70+
render() {
7471
return (
7572
<div>
7673
<h2>Inside the feed</h2>
@@ -84,7 +81,7 @@ var FeedPicture = React.createClass({
8481
});
8582

8683
var Picture = React.createClass({
87-
render () {
84+
render() {
8885
return (
8986
<div>
9087
<h2>Not Inside the feed</h2>
@@ -104,7 +101,7 @@ var FeedPictureRoute = {
104101

105102
var FeedRoute = {
106103
component: Feed,
107-
childRoutes: [ FeedPictureRoute ],
104+
childRoutes: [ FeedPictureRoute ]
108105
};
109106

110107
var PictureRoute = {
@@ -117,18 +114,19 @@ var RootRoute = {
117114
component: App,
118115
indexRoute: FeedRoute,
119116

120-
getChildRoutes (state, cb) {
117+
getChildRoutes (location, cb) {
118+
var { state } = location;
119+
121120
if (state && state.fromFeed) {
122121
cb(null, [ FeedRoute ]);
123-
}
124-
else {
122+
} else {
125123
cb(null, [ PictureRoute ]);
126124
}
127125
}
128126
};
129127

130128
React.render(
131-
<Router history={history} children={RootRoute}/>,
129+
<Router history={history} children={RootRoute} />,
132130
document.getElementById('example')
133131
);
134132

‎examples/query-params/app.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React from 'react';
2-
import { history } from 'react-router/lib/HashHistory';
2+
import createHistory from 'history/lib/createHashHistory';
33
import { Router, Route, Link } from 'react-router';
44

5+
var history = createHistory();
6+
57
var User = React.createClass({
68
render() {
79
var { query } = this.props.location;

‎examples/shared-root/app.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import React from 'react';
2-
import { history } from 'react-router/lib/HashHistory';
2+
import createHistory from 'history/lib/createHashHistory';
33
import { Router, Route, Link } from 'react-router';
44

5+
var history = createHistory();
6+
57
var App = React.createClass({
68
render() {
79
return (
810
<div>
911
<p>
10-
This illustrates how routes can share UI w/o sharing the url,
11-
when routes have no path, they never match themselves but their
12+
This illustrates how routes can share UI w/o sharing the URL.
13+
When routes have no path, they never match themselves but their
1214
children can, allowing "/signin" and "/forgot-password" to both
1315
be render in the <code>SignedOut</code> component.
1416
</p>

‎examples/sidebar/app.js‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import React from 'react';
2-
import { history } from 'react-router/lib/HashHistory';
2+
import createHistory from 'history/lib/createHashHistory';
33
import { Router, Route, Link } from 'react-router';
44
import data from './data';
55

6+
var history = createHistory();
7+
68
var Category = React.createClass({
79
render() {
810
var category = data.lookupCategory(this.props.params.category);
@@ -25,8 +27,10 @@ var CategorySidebar = React.createClass({
2527
<Link to="/">◀︎ Back</Link>
2628
<h2>{category.name} Items</h2>
2729
<ul>
28-
{category.items.map(item => (
29-
<li><Link to={`/category/${category.name}/${item.name}`}>{item.name}</Link></li>
30+
{category.items.map((item, index) => (
31+
<li key={index}>
32+
<Link to={`/category/${category.name}/${item.name}`}>{item.name}</Link>
33+
</li>
3034
))}
3135
</ul>
3236
</div>
@@ -61,15 +65,16 @@ var Index = React.createClass({
6165
}
6266
});
6367

64-
6568
var IndexSidebar = React.createClass({
6669
render() {
6770
return (
6871
<div>
6972
<h2>Categories</h2>
7073
<ul>
71-
{data.getAll().map(category => (
72-
<li><Link to={`/category/${category.name}`}>{category.name}</Link></li>
74+
{data.getAll().map((category, index) => (
75+
<li key={index}>
76+
<Link to={`/category/${category.name}`}>{category.name}</Link>
77+
</li>
7378
))}
7479
</ul>
7580
</div>

‎examples/webpack.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ module.exports = {
1313
entry: fs.readdirSync(__dirname).reduce(function (entries, dir) {
1414
var isDraft = dir.charAt(0) === '_';
1515

16-
if (!isDraft && isDirectory(path.join(__dirname, dir)))
16+
if (!isDraft && isDirectory(path.join(__dirname, dir)) && dir === 'transitions')
1717
entries[dir] = path.join(__dirname, dir, 'app.js');
1818

1919
return entries;

‎modules/experimental/AsyncProps.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import invariant from 'invariant';
3+
34
var { func, array, shape, object } = React.PropTypes;
45

56
var contextTypes = {

0 commit comments

Comments
 (0)