Skip to content

Commit efac1a8

Browse files
ryanflorenceryanflorence
committed
cleaned up some examples, added active-links
1 parent dc1632d commit efac1a8

File tree

5 files changed

+114
-2
lines changed

5 files changed

+114
-2
lines changed

‎examples/active-links/app.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import React from 'react'
2+
import { render } from 'react-dom'
3+
import { Router, Route, IndexRoute, Link, IndexLink } from 'react-router'
4+
import { createHistory, useBasename } from 'history'
5+
6+
const ACTIVE = { color: 'red' }
7+
8+
class App extends React.Component {
9+
render() {
10+
return (
11+
<div>
12+
<h1>APP!</h1>
13+
<ul>
14+
<li><Link to="/" activeStyle={ACTIVE}>/</Link></li>
15+
<li><IndexLink to="/" activeStyle={ACTIVE}>/ IndexLink</IndexLink></li>
16+
17+
<li><Link to="/users" activeStyle={ACTIVE}>/users</Link></li>
18+
<li><IndexLink to="/users" activeStyle={ACTIVE}>/users IndexLink</IndexLink></li>
19+
20+
<li><Link to="/users/ryan" activeStyle={ACTIVE}>/users/ryan</Link></li>
21+
<li><Link to="/users/ryan" query={{ foo: 'bar' }} activeStyle={ACTIVE}>/users/ryan?foo=bar</Link></li>
22+
23+
<li><Link to="/about" activeStyle={ACTIVE}>/about</Link></li>
24+
</ul>
25+
26+
{this.props.children}
27+
</div>
28+
)
29+
}
30+
}
31+
32+
class Index extends React.Component {
33+
render() {
34+
return (
35+
<div>
36+
<h2>Index!</h2>
37+
</div>
38+
)
39+
}
40+
}
41+
42+
class Users extends React.Component {
43+
render() {
44+
return (
45+
<div>
46+
<h2>Users</h2>
47+
</div>
48+
)
49+
}
50+
}
51+
52+
class UsersIndex extends React.Component {
53+
render() {
54+
return (
55+
<div>
56+
<h3>UsersIndex</h3>
57+
</div>
58+
)
59+
}
60+
}
61+
62+
class User extends React.Component {
63+
render() {
64+
return (
65+
<div>
66+
<h3>User {this.props.params.id}</h3>
67+
</div>
68+
)
69+
}
70+
}
71+
72+
class About extends React.Component {
73+
render() {
74+
return (
75+
<div>
76+
<h2>About</h2>
77+
</div>
78+
)
79+
}
80+
}
81+
82+
const history = useBasename(createHistory)({
83+
basename: '/active-links'
84+
})
85+
86+
render((
87+
<Router history={history}>
88+
<Route path="/" component={App}>
89+
<IndexRoute component={Index}/>
90+
<Route path="/about" component={About}/>
91+
<Route path="users" component={Users}>
92+
<IndexRoute component={UsersIndex}/>
93+
<Route path=":id" component={User}/>
94+
</Route>
95+
</Route>
96+
</Router>
97+
), document.getElementById('example'))
98+

‎examples/active-links/index.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<!doctype html public "restroom">
2+
<title>Active Links Example</title>
3+
<link href="/global.css" rel="stylesheet"/>
4+
<body>
5+
<h1 class="breadcrumbs"><a href="/">React Router Examples</a> / Active Links</h1>
6+
<div id="example"/>
7+
<script src="/__build__/shared.js"></script>
8+
<script src="/__build__/active-links.js"></script>

‎examples/auth-flow/app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const Login = React.createClass({
8484
if (location.state && location.state.nextPathname) {
8585
this.history.replaceState(null, location.state.nextPathname)
8686
} else {
87-
this.history.replaceState(null, '/about')
87+
this.history.replaceState(null, '/')
8888
}
8989
})
9090
},

‎examples/auth-with-shared-root/app.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,10 @@ import React from 'react'
22
import { render } from 'react-dom'
33
import { Router } from 'react-router'
44
import routes from './config/routes'
5+
import { createHistory, useBasename } from 'history'
56

6-
render(<Router routes={routes}/>, document.getElementById('example'))
7+
const history = useBasename(createHistory)({
8+
basename: '/auth-with-shared-root'
9+
})
10+
11+
render(<Router history={history} routes={routes}/>, document.getElementById('example'))

‎examples/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<body>
55
<h1>React Router Examples</h1>
66
<ul>
7+
<li><a href="active-links">Active Links</a></li>
78
<li><a href="animations">Animations</a></li>
89
<li><a href="auth-flow">Auth Flow</a></li>
910
<li><a href="auth-with-shared-root">Auth With Shared Root</a></li>

0 commit comments

Comments
 (0)