Skip to content

Commit fc8a7a4

Browse files
mjacksonmjackson
committed
[changed] Run examples using HTML5 history
Fixes #1868
1 parent 37d9bac commit fc8a7a4

File tree

30 files changed

+431
-335
lines changed

30 files changed

+431
-335
lines changed

‎examples/animations/app.js‎

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
1-
import React from 'react/addons';
2-
import { Router, Route, Link } from 'react-router';
1+
import React from 'react/addons'
2+
import { createHistory, useBasename } from 'history'
3+
import { Router, Route, Link } from 'react-router'
34

4-
var { CSSTransitionGroup } = React.addons;
5+
require('./app.css')
56

6-
var App = React.createClass({
7+
const history = useBasename(createHistory)({
8+
basename: '/animations'
9+
})
10+
11+
const { CSSTransitionGroup } = React.addons
12+
13+
class App extends React.Component {
714
render() {
8-
var key = this.props.location.pathname;
15+
const { pathname } = this.props.location
16+
17+
console.log(pathname)
918

1019
return (
1120
<div>
@@ -14,40 +23,40 @@ var App = React.createClass({
1423
<li><Link to="/page2">Page 2</Link></li>
1524
</ul>
1625
<CSSTransitionGroup component="div" transitionName="example">
17-
{React.cloneElement(this.props.children || <div />, { key: key })}
26+
{React.cloneElement(this.props.children || <div />, { key: pathname })}
1827
</CSSTransitionGroup>
1928
</div>
20-
);
29+
)
2130
}
22-
});
31+
}
2332

24-
var Page1 = React.createClass({
33+
class Page1 extends React.Component {
2534
render() {
2635
return (
2736
<div className="Image">
2837
<h1>Page 1</h1>
2938
<p><Link to="/page1" activeClassName="link-active">A link to page 1 should be active</Link>. Lorem ipsum dolor sit amet, consectetur adipisicing elit. <Link to="/page2" activeClassName="link-active">A link to page 2 should be inactive</Link>. Do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
3039
</div>
31-
);
40+
)
3241
}
33-
});
42+
}
3443

35-
var Page2 = React.createClass({
44+
class Page2 extends React.Component {
3645
render() {
3746
return (
3847
<div className="Image">
3948
<h1>Page 2</h1>
4049
<p>Consectetur adipisicing elit, sed do <Link to="/page2" activeClassName="link-active">a link to page 2 should also be active</Link> eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
4150
</div>
42-
);
51+
)
4352
}
44-
});
53+
}
4554

4655
React.render((
47-
<Router>
56+
<Router history={history}>
4857
<Route path="/" component={App}>
4958
<Route path="page1" component={Page1} />
5059
<Route path="page2" component={Page2} />
5160
</Route>
5261
</Router>
53-
), document.getElementById('example'));
62+
), document.getElementById('example'))

‎examples/animations/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!doctype html public "restroom">
22
<title>Animation Example</title>
3-
<link href="../global.css" rel="stylesheet"/>
4-
<link href="app.css" rel="stylesheet"/>
3+
<link href="/global.css" rel="stylesheet"/>
4+
<link href="/animations/app.css" rel="stylesheet"/>
55
<body>
6-
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Animations</h1>
6+
<h1 class="breadcrumbs"><a href="/">React Router Examples</a> / Animations</h1>
77
<div id="example"/>
88
<script src="/__build__/shared.js"></script>
99
<script src="/__build__/animations.js"></script>

‎examples/auth-flow/app.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import React, { findDOMNode } from 'react';
22
import { Router, Route, Link, History } from 'react-router';
3+
import { createHistory, useBasename } from 'history'
34
import auth from './auth';
45

6+
const history = useBasename(createHistory)({
7+
basename: '/auth-flow'
8+
})
9+
510
var App = React.createClass({
611
getInitialState() {
712
return {
@@ -114,13 +119,12 @@ var Logout = React.createClass({
114119
});
115120

116121
function requireAuth(nextState, replaceState) {
117-
if (!auth.loggedIn()) {
122+
if (!auth.loggedIn())
118123
replaceState({ nextPathname: nextState.location.pathname }, '/login');
119-
}
120124
}
121125

122126
React.render((
123-
<Router>
127+
<Router history={history}>
124128
<Route path="/" component={App}>
125129
<Route path="login" component={Login} />
126130
<Route path="logout" component={Logout} />

‎examples/auth-flow/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!doctype html public "display of affection">
22
<title>Authentication Flow Example</title>
3-
<link rel="stylesheet" href="../global.css"/>
3+
<link rel="stylesheet" href="/global.css"/>
44
<body>
5-
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Auth Flow</h1>
5+
<h1 class="breadcrumbs"><a href="/">React Router Examples</a> / Auth Flow</h1>
66
<div id="example"/>
77
<script src="/__build__/shared.js"></script>
88
<script src="/__build__/auth-flow.js"></script>

‎examples/dynamic-segments/app.js‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,62 @@
1-
import React from 'react';
2-
import { Router, Route, Link, Redirect } from 'react-router';
1+
import React from 'react'
2+
import { Router, Route, Link, Redirect } from 'react-router'
3+
import { createHistory, useBasename } from 'history'
34

4-
var App = React.createClass({
5+
const history = useBasename(createHistory)({
6+
basename: '/dynamic-segments'
7+
})
8+
9+
class App extends React.Component {
510
render() {
611
return (
712
<div>
813
<ul>
9-
<li><Link to="/user/123">Bob</Link></li>
10-
<li><Link to="/user/abc">Sally</Link></li>
14+
<li><Link to="/user/123" activeClassName="active">Bob</Link></li>
15+
<li><Link to="/user/abc" activeClassName="active">Sally</Link></li>
1116
</ul>
1217
{this.props.children}
1318
</div>
14-
);
19+
)
1520
}
16-
});
21+
}
1722

18-
var User = React.createClass({
23+
class User extends React.Component {
1924
render() {
20-
var { userID } = this.props.params;
25+
const { userID } = this.props.params
2126

2227
return (
2328
<div className="User">
2429
<h1>User id: {userID}</h1>
2530
<ul>
26-
<li><Link to={`/user/${userID}/tasks/foo`}>foo task</Link></li>
27-
<li><Link to={`/user/${userID}/tasks/bar`}>bar task</Link></li>
31+
<li><Link to={`/user/${userID}/tasks/foo`} activeClassName="active">foo task</Link></li>
32+
<li><Link to={`/user/${userID}/tasks/bar`} activeClassName="active">bar task</Link></li>
2833
</ul>
2934
{this.props.children}
3035
</div>
31-
);
36+
)
3237
}
33-
});
38+
}
3439

35-
var Task = React.createClass({
40+
class Task extends React.Component {
3641
render() {
37-
var { userID, taskID } = this.props.params;
42+
const { userID, taskID } = this.props.params
3843

3944
return (
4045
<div className="Task">
4146
<h2>User ID: {userID}</h2>
4247
<h3>Task ID: {taskID}</h3>
4348
</div>
44-
);
49+
)
4550
}
46-
});
51+
}
4752

4853
React.render((
49-
<Router>
54+
<Router history={history}>
5055
<Route path="/" component={App}>
5156
<Route path="user/:userID" component={User}>
5257
<Route path="tasks/:taskID" component={Task} />
5358
<Redirect from="todos/:taskID" to="/user/:userID/tasks/:taskID" />
5459
</Route>
5560
</Route>
5661
</Router>
57-
), document.getElementById('example'));
62+
), document.getElementById('example'))

‎examples/dynamic-segments/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!doctype html public "restroom">
22
<title>Dynamic Segments Example</title>
3-
<link href="../global.css" rel="stylesheet"/>
3+
<link href="/global.css" rel="stylesheet"/>
44
<body>
5-
<h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Dynamic Segments</h1>
5+
<h1 class="breadcrumbs"><a href="/">React Router Examples</a> / Dynamic Segments</h1>
66
<div id="example"/>
77
<script src="/__build__/shared.js"></script>
88
<script src="/__build__/dynamic-segments.js"></script>

‎examples/huge-apps/app.js‎

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1-
import React from 'react';
2-
import { Router } from 'react-router';
3-
import stubbedCourses from './stubs/COURSES';
1+
import React from 'react'
2+
import { createHistory, useBasename } from 'history'
3+
import { Router } from 'react-router'
4+
import stubbedCourses from './stubs/COURSES'
45

5-
var rootRoute = {
6+
const history = useBasename(createHistory)({
7+
basename: '/huge-apps'
8+
})
9+
10+
const rootRoute = {
611
component: 'div',
712
childRoutes: [{
813
path: '/',
@@ -15,30 +20,30 @@ var rootRoute = {
1520
require('./routes/Profile'),
1621
]
1722
}]
18-
};
23+
}
1924

2025
React.render(
21-
<Router routes={rootRoute} />,
26+
<Router history={history} routes={rootRoute} />,
2227
document.getElementById('example')
23-
);
28+
)
2429

2530
// I've unrolled the recursive directory loop that is happening above to get a
2631
// better idea of just what this huge-apps Router looks like
2732
//
2833
// import { Route } from 'react-router'
2934

30-
// import App from './components/App';
31-
// import Course from './routes/Course/components/Course';
32-
// import AnnouncementsSidebar from './routes/Course/routes/Announcements/components/Sidebar';
33-
// import Announcements from './routes/Course/routes/Announcements/components/Announcements';
34-
// import Announcement from './routes/Course/routes/Announcements/routes/Announcement/components/Announcement';
35-
// import AssignmentsSidebar from './routes/Course/routes/Assignments/components/Sidebar';
36-
// import Assignments from './routes/Course/routes/Assignments/components/Assignments';
37-
// import Assignment from './routes/Course/routes/Assignments/routes/Assignment/components/Assignment';
38-
// import CourseGrades from './routes/Course/routes/Grades/components/Grades';
39-
// import Calendar from './routes/Calendar/components/Calendar';
40-
// import Grades from './routes/Grades/components/Grades';
41-
// import Messages from './routes/Messages/components/Messages';
35+
// import App from './components/App'
36+
// import Course from './routes/Course/components/Course'
37+
// import AnnouncementsSidebar from './routes/Course/routes/Announcements/components/Sidebar'
38+
// import Announcements from './routes/Course/routes/Announcements/components/Announcements'
39+
// import Announcement from './routes/Course/routes/Announcements/routes/Announcement/components/Announcement'
40+
// import AssignmentsSidebar from './routes/Course/routes/Assignments/components/Sidebar'
41+
// import Assignments from './routes/Course/routes/Assignments/components/Assignments'
42+
// import Assignment from './routes/Course/routes/Assignments/routes/Assignment/components/Assignment'
43+
// import CourseGrades from './routes/Course/routes/Grades/components/Grades'
44+
// import Calendar from './routes/Calendar/components/Calendar'
45+
// import Grades from './routes/Grades/components/Grades'
46+
// import Messages from './routes/Messages/components/Messages'
4247

4348
// React.render(
4449
// <Router>
@@ -65,4 +70,4 @@ React.render(
6570
// </Route>
6671
// </Router>,
6772
// document.getElementById('example')
68-
// );
73+
// )

‎examples/huge-apps/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!doctype html public "embarassment">
22
<meta charset="utf-8"/>
3-
<title>Master Detail Example</title>
4-
<link href="../global.css" rel="stylesheet"/>
3+
<title>Huge Apps Example</title>
4+
<link href="/global.css" rel="stylesheet"/>
55
<style>
66
body {
77
margin: 0;

‎examples/index.html‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44
<body>
55
<h1>React Router Examples</h1>
66
<ul>
7-
<li><a href="animations/index.html">Animations</a></li>
8-
<li><a href="auth-flow/index.html">Auth Flow</a></li>
9-
<li><a href="dynamic-segments/index.html">Dynamic Segments</a></li>
10-
<li><a href="huge-apps/index.html">Huge Apps (Partial App Loading)</a></li>
11-
<li><a href="master-detail/index.html">Master Detail</a></li>
12-
<li><a href="passing-props-to-children/index.html">Passing Props to Children</a></li>
13-
<li><a href="pinterest/index.html">Pinterest-style UI (location.state)</a></li>
14-
<li><a href="nested-animations/index.html">Nested Animations</a></li>
15-
<li><a href="query-params/index.html">Query Params</a></li>
16-
<li><a href="redirect-using-index/index.html">Redirect using IndexRoute</a></li>
17-
<li><a href="shared-root/index.html">Shared Root</a></li>
18-
<li><a href="sidebar/index.html">Sidebar</a></li>
19-
<li><a href="transitions/index.html">Transitions</a></li>
7+
<li><a href="animations">Animations</a></li>
8+
<li><a href="auth-flow">Auth Flow</a></li>
9+
<li><a href="dynamic-segments">Dynamic Segments</a></li>
10+
<li><a href="huge-apps">Huge Apps (Partial App Loading)</a></li>
11+
<li><a href="master-detail">Master Detail</a></li>
12+
<li><a href="passing-props-to-children">Passing Props to Children</a></li>
13+
<li><a href="pinterest">Pinterest-style UI (location.state)</a></li>
14+
<li><a href="nested-animations">Nested Animations</a></li>
15+
<li><a href="query-params">Query Params</a></li>
16+
<li><a href="redirect-using-index">Redirect using IndexRoute</a></li>
17+
<li><a href="shared-root">Shared Root</a></li>
18+
<li><a href="sidebar">Sidebar</a></li>
19+
<li><a href="transitions">Transitions</a></li>
2020
</ul>

0 commit comments

Comments
 (0)