-
20 | {this.props.routes.map((item, index) =>
21 |
- 22 | 26 | {item.component.title} 27 | 28 | {(index + 1) < depth && '\u2192'} 29 | 30 | )} 31 |
8 |
10 | )
11 | }
12 |
13 | }
14 |
15 | module.exports = Grades
16 |
--------------------------------------------------------------------------------
/examples/huge-apps/routes/Profile/components/Profile.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | class Profile extends Component {
4 | render() {
5 | return (
6 | Grades
9 |
7 |
9 | )
10 | }
11 | }
12 |
13 | module.exports = Profile
14 |
--------------------------------------------------------------------------------
/examples/huge-apps/routes/Course/components/Dashboard.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | class Dashboard extends Component {
4 | render() {
5 | return (
6 | Profile
8 |
7 |
9 | )
10 | }
11 | }
12 |
13 | export default Dashboard
14 |
--------------------------------------------------------------------------------
/examples/huge-apps/routes/Messages/components/Messages.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | class Messages extends Component {
4 |
5 | render() {
6 | return (
7 | Course Dashboard
8 |
8 |
10 | )
11 | }
12 |
13 | }
14 |
15 | module.exports = Messages
16 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["react"],
3 | "plugins": ["dev-expression"],
4 |
5 | "env": {
6 | "cjs": {
7 | "presets": ["es2015-loose", "stage-1"],
8 | "plugins": ["add-module-exports"]
9 | },
10 | "es": {
11 | "presets": ["es2015-loose-native-modules", "stage-1"]
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/examples/global.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: "Helvetica Neue", Arial;
3 | font-weight: 200;
4 | }
5 |
6 | h1, h2, h3 {
7 | font-weight: 100;
8 | }
9 |
10 | a {
11 | color: hsl(200, 50%, 50%);
12 | }
13 |
14 | a.active {
15 | color: hsl(20, 50%, 50%);
16 | }
17 |
18 | .breadcrumbs a {
19 | text-decoration: none;
20 | }
21 |
--------------------------------------------------------------------------------
/SPONSORS.md:
--------------------------------------------------------------------------------
1 | The following companies have provided sponsorship toward the development
2 | of React Router. Thank you!
3 |
4 | - [React Training](https://reactjs-training.com)
5 | - [](http://moduscreate.com/)
6 | - [](https://www.instructure.com/)
7 |
8 |
--------------------------------------------------------------------------------
/examples/auth-with-shared-root/components/Logout.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import auth from '../utils/auth'
3 |
4 | const Logout = React.createClass({
5 | componentDidMount() {
6 | auth.logout()
7 | },
8 |
9 | render() {
10 | return Messages
9 |You are now logged out
11 | } 12 | }) 13 | 14 | export default Logout 15 | -------------------------------------------------------------------------------- /modules/IndexLink.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Link from './Link' 3 | 4 | /** 5 | * AnReact Router Examples / Sidebar
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/pinterest/index.html: -------------------------------------------------------------------------------- 1 | 2 |React Router Examples / Pinterest
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/active-links/index.html: -------------------------------------------------------------------------------- 1 | 2 |React Router Examples / Active Links
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/huge-apps/routes/Course/routes/Assignments/components/Assignments.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | class Assignments extends Component { 4 | render() { 5 | return ( 6 |
7 |
10 | )
11 | }
12 | }
13 |
14 | module.exports = Assignments
15 |
--------------------------------------------------------------------------------
/examples/query-params/index.html:
--------------------------------------------------------------------------------
1 |
2 | Assignments
8 | {this.props.children ||Choose an assignment from the sidebar.
} 9 |React Router Examples / Query Params
7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/master-detail/index.html: -------------------------------------------------------------------------------- 1 | 2 |React Router Examples / Master Detail
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/route-no-match/index.html: -------------------------------------------------------------------------------- 1 | 2 |React Router Examples / Route Not Found
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/auth-flow/index.html: -------------------------------------------------------------------------------- 1 | 2 |React Router Examples / Auth Flow
7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/huge-apps/routes/Course/routes/Announcements/components/Announcements.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | class Announcements extends Component { 4 | render() { 5 | return ( 6 |
7 |
10 | )
11 | }
12 | }
13 |
14 | module.exports = Announcements
15 |
--------------------------------------------------------------------------------
/examples/dynamic-segments/index.html:
--------------------------------------------------------------------------------
1 |
2 | Announcements
8 | {this.props.children ||Choose an announcement from the sidebar.
} 9 |React Router Examples / Dynamic Segments
7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/nested-animations/index.html: -------------------------------------------------------------------------------- 1 | 2 |React Router Examples / Nested Animations
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /modules/__tests__/execSteps.js: -------------------------------------------------------------------------------- 1 | function execSteps(steps, done) { 2 | let index = 0 3 | 4 | return function () { 5 | if (steps.length === 0) { 6 | done() 7 | } else { 8 | try { 9 | steps[index++].apply(this, arguments) 10 | 11 | if (index === steps.length) 12 | done() 13 | } catch (error) { 14 | done(error) 15 | } 16 | } 17 | } 18 | } 19 | 20 | export default execSteps 21 | -------------------------------------------------------------------------------- /examples/animations/index.html: -------------------------------------------------------------------------------- 1 | 2 |React Router Examples / Animations
8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/breadcrumbs/index.html: -------------------------------------------------------------------------------- 1 | 2 |React Router Examples / Breadcrumbs
8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/confirming-navigation/index.html: -------------------------------------------------------------------------------- 1 | 2 |React Router Examples / Confirming Navigation
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/auth-with-shared-root/components/Dashboard.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import auth from '../utils/auth' 3 | 4 | const Dashboard = React.createClass({ 5 | render() { 6 | const token = auth.getToken() 7 | 8 | return ( 9 |
10 |
15 | )
16 | }
17 | })
18 |
19 | export default Dashboard
20 |
--------------------------------------------------------------------------------
/examples/auth-with-shared-root/index.html:
--------------------------------------------------------------------------------
1 |
2 | Dashboard
11 |You made it!
12 |{token}
13 | {this.props.children} 14 |React Router Examples / Auth With Shared Root
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - stable 5 | cache: 6 | directories: 7 | - node_modules 8 | before_install: 9 | - export CHROME_BIN=chromium-browser 10 | - export DISPLAY=:99.0 11 | - sh -e /etc/init.d/xvfb start 12 | after_success: 13 | - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js 14 | - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js 15 | branches: 16 | only: 17 | - master 18 | - next 19 | -------------------------------------------------------------------------------- /examples/passing-props-to-children/index.html: -------------------------------------------------------------------------------- 1 | 2 |React Router Examples / Passing Props to Children
7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/sidebar/app.css: -------------------------------------------------------------------------------- 1 | .Sidebar { 2 | float: left; 3 | background: #eee; 4 | padding: 20px; 5 | margin: 0 20px 20px 20px; 6 | width: 200px; 7 | cursor: pointer; 8 | } 9 | 10 | .Content { 11 | padding: 20px 20px 20px 300px; 12 | } 13 | 14 | .CategoryNav__Toggle:before { 15 | display: inline-block; 16 | width: 1em; 17 | content: '▸'; 18 | } 19 | 20 | .CategoryNav__Toggle--is-open:before { 21 | content: '▾'; 22 | } 23 | 24 | a { 25 | text-decoration: none; 26 | } 27 | -------------------------------------------------------------------------------- /examples/huge-apps/components/App.js: -------------------------------------------------------------------------------- 1 | /*globals COURSES:true */ 2 | import React, { Component } from 'react' 3 | import Dashboard from './Dashboard' 4 | import GlobalNav from './GlobalNav' 5 | 6 | class App extends Component { 7 | render() { 8 | return ( 9 |
10 |
15 | )
16 | }
17 | }
18 |
19 | module.exports = App
20 |
--------------------------------------------------------------------------------
/examples/animations/app.css:
--------------------------------------------------------------------------------
1 | .Image {
2 | position: absolute;
3 | height: 400px;
4 | width: 400px;
5 | }
6 |
7 | .example-enter {
8 | opacity: 0.01;
9 | transition: opacity .5s ease-in;
10 | }
11 |
12 | .example-enter.example-enter-active {
13 | opacity: 1;
14 | }
15 |
16 | .example-leave {
17 | opacity: 1;
18 | transition: opacity .5s ease-in;
19 | }
20 |
21 | .example-leave.example-leave-active {
22 | opacity: 0;
23 | }
24 |
25 | .link-active {
26 | color: #bbbbbb;
27 | text-decoration: none;
28 | }
29 |
--------------------------------------------------------------------------------
/examples/auth-with-shared-root/components/Landing.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Landing = React.createClass({
4 |
5 | render() {
6 | return (
7 |
12 | {this.props.children ||
14 |
8 |
12 | )
13 | }
14 |
15 | })
16 |
17 | export default Landing
18 |
--------------------------------------------------------------------------------
/examples/huge-apps/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Landing Page
9 |This page is only shown to unauthenticated users.
10 |Partial / Lazy loading. Open the network tab while you navigate. Notice that only the required components are downloaded as you navigate around.
11 |
11 |
18 | )
19 | }
20 | }
21 |
22 | module.exports = Calendar
23 |
--------------------------------------------------------------------------------
/modules/RoutingContext.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import RouterContext from './RouterContext'
3 | import warning from './routerWarning'
4 |
5 | const RoutingContext = React.createClass({
6 | componentWillMount() {
7 | warning(false, '`RoutingContext` has been renamed to `RouterContext`. Please use `import { RouterContext } from \'react-router\'`. http://tiny.cc/router-routercontext')
8 | },
9 |
10 | render() {
11 | return Calendar
12 |-
13 | {events.map(event => (
14 |
- {event.title} 15 | ))} 16 |
11 |
14 | )
15 | }
16 | }
17 |
18 | module.exports = Assignment
19 |
--------------------------------------------------------------------------------
/examples/huge-apps/routes/Course/routes/Assignments/index.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | path: 'assignments',
3 |
4 | getChildRoutes(location, cb) {
5 | require.ensure([], (require) => {
6 | cb(null, [
7 | require('./routes/Assignment')
8 | ])
9 | })
10 | },
11 |
12 | getComponents(nextState, cb) {
13 | require.ensure([], (require) => {
14 | cb(null, {
15 | sidebar: require('./components/Sidebar'),
16 | main: require('./components/Assignments')
17 | })
18 | })
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/examples/huge-apps/routes/Course/routes/Announcements/index.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | path: 'announcements',
3 |
4 | getChildRoutes(location, cb) {
5 | require.ensure([], (require) => {
6 | cb(null, [
7 | require('./routes/Announcement')
8 | ])
9 | })
10 | },
11 |
12 | getComponents(nextState, cb) {
13 | require.ensure([], (require) => {
14 | cb(null, {
15 | sidebar: require('./components/Sidebar'),
16 | main: require('./components/Announcements')
17 | })
18 | })
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/examples/huge-apps/routes/Course/routes/Announcements/routes/Announcement/components/Announcement.js:
--------------------------------------------------------------------------------
1 | /*globals COURSES:true */
2 | import React, { Component } from 'react'
3 |
4 | class Announcement extends Component {
5 | render() {
6 | let { courseId, announcementId } = this.props.params
7 | let { title, body } = COURSES[courseId].announcements[announcementId]
8 |
9 | return (
10 | {title}
12 |{body}
13 |
11 |
14 | )
15 | }
16 | }
17 |
18 | module.exports = Announcement
19 |
--------------------------------------------------------------------------------
/docs/guides/README.md:
--------------------------------------------------------------------------------
1 | # Guides
2 |
3 | * [Route Configuration](RouteConfiguration.md)
4 | * [Route Matching](RouteMatching.md)
5 | * [Histories](Histories.md)
6 | * [Index Routes and Links](IndexRoutes.md)
7 | * [Testing](testing.md)
8 | * [Dynamic Routing](DynamicRouting.md)
9 | * [Confirming Navigation](ConfirmingNavigation.md)
10 | * [Server Rendering](ServerRendering.md)
11 | * [Component Lifecycle](ComponentLifecycle.md)
12 | * [Navigating Outside of Components](NavigatingOutsideOfComponents.md)
13 | * [Minimizing Bundle Size](MinimizingBundleSize.md)
14 |
--------------------------------------------------------------------------------
/modules/History.js:
--------------------------------------------------------------------------------
1 | import warning from './routerWarning'
2 | import { history } from './InternalPropTypes'
3 |
4 | /**
5 | * A mixin that adds the "history" instance variable to components.
6 | */
7 | const History = {
8 |
9 | contextTypes: {
10 | history
11 | },
12 |
13 | componentWillMount() {
14 | warning(false, 'the `History` mixin is deprecated, please access `context.router` with your own `contextTypes`. http://tiny.cc/router-historymixin')
15 | this.history = this.context.history
16 | }
17 |
18 | }
19 |
20 | export default History
21 |
--------------------------------------------------------------------------------
/examples/breadcrumbs/app.css:
--------------------------------------------------------------------------------
1 | aside {
2 | position: absolute;
3 | left: 0;
4 | width: 300px;
5 | }
6 |
7 | main {
8 | position: absolute;
9 | left: 310px;
10 | }
11 |
12 | ul.breadcrumbs-list {
13 | margin: 0;
14 | padding: 0;
15 | }
16 |
17 | ul.breadcrumbs-list li {
18 | display: inline-block;
19 | margin-right: 20px;
20 | }
21 |
22 | ul.breadcrumbs-list li a:not(.breadcrumb-active) {
23 | font-weight: bold;
24 | margin-right: 20px;
25 | }
26 |
27 | ul.breadcrumbs-list li a.breadcrumb-active {
28 | text-decoration: none;
29 | cursor: default;
30 | }
31 |
--------------------------------------------------------------------------------
/examples/huge-apps/routes/Course/routes/Grades/components/Grades.js:
--------------------------------------------------------------------------------
1 | /*globals COURSES:true */
2 | import React, { Component } from 'react'
3 |
4 | class Grades extends Component {
5 | render() {
6 | let { assignments } = COURSES[this.props.params.courseId]
7 |
8 | return (
9 | {title}
12 |{body}
13 |
10 |
17 | )
18 | }
19 | }
20 |
21 | module.exports = Grades
22 |
--------------------------------------------------------------------------------
/examples/auth-flow-async-with-query-params/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Grades
11 |-
12 | {assignments.map(assignment => (
13 |
- {assignment.grade} - {assignment.title} 14 | ))} 15 |
React Router Examples / Async Auth with Query Parameters
11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /docs/guides/NavigatingOutsideOfComponents.md: -------------------------------------------------------------------------------- 1 | # Navigating Outside of Components 2 | 3 | While you can use `this.props.router` from `withRouter` to navigate around, many apps want to be able to navigate outside of their components. They can do that with the history the app gives to `Router`. 4 | 5 | ```js 6 | // your main file that renders a Router 7 | import { Router, browserHistory } from 'react-router' 8 | import routes from './app/routes' 9 | render(
11 |
22 | )
23 | }
24 | }
25 |
26 | module.exports = Sidebar
27 |
--------------------------------------------------------------------------------
/modules/InternalPropTypes.js:
--------------------------------------------------------------------------------
1 | import { PropTypes } from 'react'
2 |
3 | const { func, object, arrayOf, oneOfType, element, shape, string } = PropTypes
4 |
5 | export function falsy(props, propName, componentName) {
6 | if (props[propName])
7 | return new Error(`<${componentName}> should not have a "${propName}" prop`)
8 | }
9 |
10 | export const history = shape({
11 | listen: func.isRequired,
12 | push: func.isRequired,
13 | replace: func.isRequired,
14 | go: func.isRequired,
15 | goBack: func.isRequired,
16 | goForward: func.isRequired
17 | })
18 |
19 | export const component = oneOfType([ func, string ])
20 | export const components = oneOfType([ component, object ])
21 | export const route = oneOfType([ object, element ])
22 | export const routes = oneOfType([ route, arrayOf(route) ])
23 |
--------------------------------------------------------------------------------
/examples/master-detail/app.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: "Helvetica Neue", Arial;
3 | font-weight: 200;
4 | }
5 |
6 | a {
7 | color: hsl(200, 50%, 50%);
8 | }
9 |
10 | a.active {
11 | color: hsl(20, 50%, 50%);
12 | }
13 |
14 | #example {
15 | position: absolute;
16 | }
17 |
18 | .App {
19 | position: absolute;
20 | top: 0;
21 | left: 0;
22 | right: 0;
23 | bottom: 0;
24 | width: 500px;
25 | height: 500px;
26 | }
27 |
28 | .ContactList {
29 | position: absolute;
30 | left: 0;
31 | top: 0;
32 | bottom: 0;
33 | width: 300px;
34 | overflow: auto;
35 | padding: 20px;
36 | }
37 |
38 | .Content {
39 | position: absolute;
40 | left: 300px;
41 | top: 0;
42 | bottom: 0;
43 | right: 0;
44 | border-left: 1px solid #ccc;
45 | overflow: auto;
46 | padding: 40px;
47 | }
48 |
49 |
--------------------------------------------------------------------------------
/modules/__tests__/getParamNames-test.js:
--------------------------------------------------------------------------------
1 | import expect from 'expect'
2 | import { getParamNames } from '../PatternUtils'
3 |
4 | describe('getParamNames', function () {
5 | describe('when a pattern contains no dynamic segments', function () {
6 | it('returns an empty array', function () {
7 | expect(getParamNames('a/b/c')).toEqual([])
8 | })
9 | })
10 |
11 | describe('when a pattern contains :a and :b dynamic segments', function () {
12 | it('returns the correct names', function () {
13 | expect(getParamNames('/comments/:a/:b/edit')).toEqual([ 'a', 'b' ])
14 | })
15 | })
16 |
17 | describe('when a pattern has a *', function () {
18 | it('uses the name "splat"', function () {
19 | expect(getParamNames('/files/*.jpg')).toEqual([ 'splat' ])
20 | })
21 | })
22 | })
23 |
--------------------------------------------------------------------------------
/examples/passing-props-to-children/app.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: "Helvetica Neue", Arial;
3 | font-weight: 200;
4 | }
5 |
6 | a {
7 | color: hsl(200, 50%, 50%);
8 | }
9 |
10 | a.active {
11 | color: hsl(20, 50%, 50%);
12 | }
13 |
14 | #example {
15 | position: absolute;
16 | }
17 |
18 | .App {
19 | position: absolute;
20 | top: 0;
21 | left: 0;
22 | right: 0;
23 | bottom: 0;
24 | width: 500px;
25 | height: 500px;
26 | }
27 |
28 | .Master {
29 | position: absolute;
30 | left: 0;
31 | top: 0;
32 | bottom: 0;
33 | width: 300px;
34 | overflow: auto;
35 | padding: 10px 40px;
36 | }
37 |
38 | .Detail {
39 | position: absolute;
40 | left: 300px;
41 | top: 0;
42 | bottom: 0;
43 | right: 0;
44 | border-left: 1px solid #ccc;
45 | overflow: auto;
46 | padding: 40px;
47 | }
48 |
49 |
--------------------------------------------------------------------------------
/examples/huge-apps/routes/Course/routes/Announcements/components/Sidebar.js:
--------------------------------------------------------------------------------
1 | /*globals COURSES:true */
2 | import React, { Component } from 'react'
3 | import { Link } from 'react-router'
4 |
5 | class AnnouncementsSidebar extends Component {
6 | render() {
7 | let { announcements } = COURSES[this.props.params.courseId]
8 |
9 | return (
10 | Sidebar Assignments
12 |-
13 | {assignments.map(assignment => (
14 |
- 15 | 16 | {assignment.title} 17 | 18 | 19 | ))} 20 |
11 |
22 | )
23 | }
24 | }
25 |
26 | module.exports = AnnouncementsSidebar
27 |
--------------------------------------------------------------------------------
/examples/nested-animations/app.css:
--------------------------------------------------------------------------------
1 | .Image {
2 | position: absolute;
3 | height: 400px;
4 | width: 400px;
5 | }
6 |
7 | .swap-enter {
8 | opacity: 0.01;
9 | transform: translateX(5em);
10 | transition: all .5s ease-in;
11 | }
12 |
13 | .swap-enter.swap-enter-active {
14 | opacity: 1;
15 | transform: translateX(0);
16 | }
17 |
18 | .swap-leave {
19 | opacity: 1;
20 | transform: translateX(0);
21 | transition: all .5s ease-in;
22 | }
23 |
24 | .swap-leave.swap-leave-active {
25 | opacity: 0;
26 | transform: translateX(-5em);
27 | }
28 |
29 | .example-enter {
30 | opacity: 0.01;
31 | transition: opacity .5s ease-in;
32 | }
33 |
34 | .example-enter.example-enter-active {
35 | opacity: 1;
36 | }
37 |
38 | .example-leave {
39 | opacity: 1;
40 | transition: opacity .5s ease-in;
41 | }
42 |
43 | .example-leave.example-leave-active {
44 | opacity: 0;
45 | }
46 |
--------------------------------------------------------------------------------
/examples/server.js:
--------------------------------------------------------------------------------
1 | /*eslint-disable no-console, no-var */
2 | var express = require('express')
3 | var rewrite = require('express-urlrewrite')
4 | var webpack = require('webpack')
5 | var webpackDevMiddleware = require('webpack-dev-middleware')
6 | var WebpackConfig = require('./webpack.config')
7 |
8 | var app = express()
9 |
10 | app.use(webpackDevMiddleware(webpack(WebpackConfig), {
11 | publicPath: '/__build__/',
12 | stats: {
13 | colors: true
14 | }
15 | }))
16 |
17 | var fs = require('fs')
18 | var path = require('path')
19 |
20 | fs.readdirSync(__dirname).forEach(function (file) {
21 | if (fs.statSync(path.join(__dirname, file)).isDirectory())
22 | app.use(rewrite('/' + file + '/*', '/' + file + '/index.html'))
23 | })
24 |
25 | app.use(express.static(__dirname))
26 |
27 | app.listen(8080, function () {
28 | console.log('Server listening on http://localhost:8080, Ctrl+C to stop')
29 | })
30 |
--------------------------------------------------------------------------------
/docs/guides/ConfirmingNavigation.md:
--------------------------------------------------------------------------------
1 | # Confirming Navigation
2 |
3 | You can prevent a transition from happening or prompt the user before leaving a [route](/docs/Glossary.md#route) with a leave hook.
4 |
5 | ```js
6 | const Home = withRouter(
7 | React.createClass({
8 |
9 | componentDidMount() {
10 | this.props.router.setRouteLeaveHook(this.props.route, this.routerWillLeave)
11 | },
12 |
13 | routerWillLeave(nextLocation) {
14 | // return false to prevent a transition w/o prompting the user,
15 | // or return a string to allow the user to decide:
16 | if (!this.state.isSaved)
17 | return 'Your work is not saved! Are you sure you want to leave?'
18 | },
19 |
20 | // ...
21 |
22 | })
23 | )
24 | ```
25 |
26 | Note that this example makes use of the [withRouter](https://github.com/reactjs/react-router/blob/v2.4.0/upgrade-guides/v2.4.0.md) higher-order component introduced in v2.4.0.
27 |
--------------------------------------------------------------------------------
/modules/RouteContext.js:
--------------------------------------------------------------------------------
1 | import warning from './routerWarning'
2 | import React from 'react'
3 |
4 | const { object } = React.PropTypes
5 |
6 | /**
7 | * The RouteContext mixin provides a convenient way for route
8 | * components to set the route in context. This is needed for
9 | * routes that render elements that want to use the Lifecycle
10 | * mixin to prevent transitions.
11 | */
12 | const RouteContext = {
13 |
14 | propTypes: {
15 | route: object.isRequired
16 | },
17 |
18 | childContextTypes: {
19 | route: object.isRequired
20 | },
21 |
22 | getChildContext() {
23 | return {
24 | route: this.props.route
25 | }
26 | },
27 |
28 | componentWillMount() {
29 | warning(false, 'The `RouteContext` mixin is deprecated. You can provide `this.props.route` on context with your own `contextTypes`. http://tiny.cc/router-routecontextmixin')
30 | }
31 |
32 | }
33 |
34 | export default RouteContext
35 |
--------------------------------------------------------------------------------
/modules/__tests__/IndexRedirect-test.js:
--------------------------------------------------------------------------------
1 | import expect from 'expect'
2 | import React from 'react'
3 | import { render, unmountComponentAtNode } from 'react-dom'
4 | import createHistory from '../createMemoryHistory'
5 | import IndexRedirect from '../IndexRedirect'
6 | import Router from '../Router'
7 | import Route from '../Route'
8 |
9 | describe('An Sidebar Assignments
12 |-
13 | {announcements.map(announcement => (
14 |
- 15 | 16 | {announcement.title} 17 | 18 | 19 | ))} 20 |
10 |
27 | )
28 | }
29 | }
30 |
31 | export default Dashboard
32 |
--------------------------------------------------------------------------------
/modules/applyRouterMiddleware.js:
--------------------------------------------------------------------------------
1 | import React, { createElement } from 'react'
2 | import RouterContext from './RouterContext'
3 |
4 | export default (...middlewares) => {
5 | const withContext = middlewares.map(m => m.renderRouterContext).filter(f => f)
6 | const withComponent = middlewares.map(m => m.renderRouteComponent).filter(f => f)
7 | const makeCreateElement = (baseCreateElement = createElement) => (
8 | (Component, props) => (
9 | withComponent.reduceRight(
10 | (previous, renderRouteComponent) => (
11 | renderRouteComponent(previous, props)
12 | ), baseCreateElement(Component, props)
13 | )
14 | )
15 | )
16 |
17 | return (renderProps) => (
18 | withContext.reduceRight(
19 | (previous, renderRouterContext) => (
20 | renderRouterContext(previous, renderProps)
21 | ), (
22 | Super Scalable Apps
11 |12 | Open the network tab as you navigate. Notice that only the amount of 13 | your app that is required is actually downloaded as you navigate 14 | around. Even the route configuration objects are loaded on the fly. 15 | This way, a new route added deep in your app will not affect the 16 | initial bundle of your application. 17 |
18 |Courses
{' '} 19 |-
20 | {courses.map(course => (
21 |
- 22 | {course.name} 23 | 24 | ))} 25 |
App
18 | } 19 | } 20 | 21 | let node 22 | beforeEach(function () { 23 | node = document.createElement('div') 24 | }) 25 | 26 | afterEach(function () { 27 | unmountComponentAtNode(node) 28 | }) 29 | 30 | it('puts router on context', function (done) { 31 | const WrappedApp = withRouter(App) 32 | 33 | render(( 34 |
25 |
32 | )
33 | } else if (children) {
34 | content = children
35 | } else {
36 | content =
26 | {sidebar}
27 |
28 |
29 | {main}
30 |
31 |
41 |
45 | )
46 | }
47 | }
48 |
49 | module.exports = Course
50 |
--------------------------------------------------------------------------------
/modules/__tests__/_bc-History-test.js:
--------------------------------------------------------------------------------
1 | import expect from 'expect'
2 | import React from 'react'
3 | import { render, unmountComponentAtNode } from 'react-dom'
4 | import History from '../History'
5 | import Router from '../Router'
6 | import Route from '../Route'
7 | import createHistory from 'history/lib/createMemoryHistory'
8 | import shouldWarn from './shouldWarn'
9 |
10 | describe('v1 History Mixin', function () {
11 |
12 | let node
13 | beforeEach(function () {
14 | node = document.createElement('div')
15 | })
16 |
17 | afterEach(function () {
18 | unmountComponentAtNode(node)
19 | })
20 |
21 | beforeEach(function () {
22 | shouldWarn('deprecated')
23 | })
24 |
25 | it('assigns the history to the component instance', function (done) {
26 |
27 | const history = createHistory('/')
28 |
29 | const Component = React.createClass({
30 | mixins: [ History ],
31 | componentWillMount() {
32 | expect(this.history).toExist()
33 | },
34 | render() { return null }
35 | })
36 |
37 | render((
38 | {course.name}
42 | 43 | {content} 44 |
27 |
42 | )
43 | }
44 |
45 | })
46 |
47 | export default App
48 |
--------------------------------------------------------------------------------
/modules/__tests__/RouteComponent-test.js:
--------------------------------------------------------------------------------
1 | import expect from 'expect'
2 | import React, { Component } from 'react'
3 | import { render, unmountComponentAtNode } from 'react-dom'
4 | import createHistory from '../createMemoryHistory'
5 | import Router from '../Router'
6 |
7 | describe('a Route Component', function () {
8 |
9 | let node
10 | beforeEach(function () {
11 | node = document.createElement('div')
12 | })
13 |
14 | afterEach(function () {
15 | unmountComponentAtNode(node)
16 | })
17 |
18 | it('injects the right props', function (done) {
19 | class Parent extends Component {
20 | componentDidMount() {
21 | expect(this.props.route).toEqual(parent)
22 | expect(this.props.routes).toEqual([ parent, child ])
23 | }
24 | render() {
25 | return null
26 | }
27 | }
28 |
29 | class Child extends Component {
30 | render() {
31 | return null
32 | }
33 | }
34 |
35 | const child = { path: 'child', component: Child }
36 | const parent = { path: '/', component: Parent, childRoutes: [ child ] }
37 |
38 | render((
39 | -
28 |
- 29 | {this.state.loggedIn ? ( 30 | Log out 31 | ) : ( 32 | Sign in 33 | )} 34 | 35 |
- About 36 |
- Home (changes depending on auth status) 37 |
- Page Two (authenticated) 38 |
- User: Foo (authenticated) 39 |
13 |
16 | )
17 | }
18 | }
19 |
20 | class App extends Component {
21 | render() {
22 | return (
23 | User id: {userID}
14 | {age} 15 |
24 |
31 | )
32 | }
33 | }
34 |
35 | render((
36 | -
25 |
- Bob 26 |
- Bob With Query Params 27 |
- Sally 28 |
React Router Examples
9 |-
10 |
- Active Links 11 |
- Animations 12 |
- Auth Flow 13 |
- Auth with Shared Root 14 |
- Async Auth with Query Parameters 15 |
- Breadcrumbs 16 |
- Confirming Navigation 17 |
- Dynamic Segments 18 |
- Huge Apps (Partial App Loading) 19 |
- Master Detail 20 |
- Nested Animations 21 |
- Passing Props to Children 22 |
- Pinterest-style UI (
location.state)
23 | - Query Params 24 |
- Route Not Found 25 |
- Sidebar 26 |
Stuff
23 | }
24 | })
25 |
26 | export default withRouter(Page)
27 | ```
28 |
29 | **It's important to note this is not a deprecation of the `context` API.** As long as React supports `this.context` in its current form, any code written for that API will continue to work. We will continue to use it internally and you can continue to write in that format, if you want. We think this new HoC is nicer and easier, and will be using it in documentation and examples, but it is not a hard requirement to switch.
30 |
--------------------------------------------------------------------------------
/examples/route-no-match/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { render } from 'react-dom'
3 | import { browserHistory, Router, Route, Link } from 'react-router'
4 |
5 | class User extends React.Component {
6 | render() {
7 | let { userID } = this.props.params
8 | let { query } = this.props.location
9 | let age = query && query.showAge ? '33' : ''
10 |
11 | return (
12 |
13 |
16 | )
17 | }
18 | }
19 |
20 | class App extends React.Component {
21 | render() {
22 | return (
23 | User id: {userID}
14 | {age} 15 |
24 |
31 | )
32 | }
33 | }
34 |
35 | class PageNotFound extends React.Component {
36 | render() {
37 | return (
38 | -
25 |
- Bob 26 |
- Bob With Query Params 27 |
- Sally 28 |
39 |
42 | )
43 | }
44 | }
45 |
46 | render((
47 | Page Not Found.
40 |Go to Home Page
41 |Index
15 | } 16 | } 17 | 18 | class Home extends Component { 19 | render() { 20 | returnHome
21 | } 22 | } 23 | 24 | beforeEach(resetHash) 25 | 26 | let node 27 | beforeEach(function () { 28 | node = document.createElement('div') 29 | }) 30 | 31 | afterEach(function () { 32 | unmountComponentAtNode(node) 33 | }) 34 | 35 | describe('when the target path contains a colon', function () { 36 | it('works', function (done) { 37 | const history = createHistory('/') 38 | const steps = [ 39 | function () { 40 | expect(this.state.location.pathname).toEqual('/') 41 | history.push('/home/hi:there') 42 | }, 43 | function () { 44 | expect(this.state.location.pathname).toEqual('/home/hi:there') 45 | } 46 | ] 47 | 48 | const execNextStep = execSteps(steps, done) 49 | 50 | render(( 51 |
43 |
53 | )
54 | }
55 | }
56 |
57 | GlobalNav.defaultProps = {
58 | user: {
59 | id: 1,
60 | name: 'Ryan Florence'
61 | }
62 | }
63 |
64 | export default GlobalNav
65 |
--------------------------------------------------------------------------------
/examples/dynamic-segments/app.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { render } from 'react-dom'
3 | import { browserHistory, Router, Route, Link, Redirect } from 'react-router'
4 |
5 | class App extends Component {
6 | render() {
7 | return (
8 |
44 | Home{' '}
45 | Calendar{' '}
46 | Grades{' '}
47 | Messages{' '}
48 |
49 |
50 | {user.name}
51 |
52 |
9 |
15 | )
16 | }
17 | }
18 |
19 | class User extends Component {
20 | render() {
21 | const { userID } = this.props.params
22 |
23 | return (
24 | -
10 |
- Bob 11 |
- Sally 12 |
25 |
32 | )
33 | }
34 | }
35 |
36 | class Task extends Component {
37 | render() {
38 | const { userID, taskID } = this.props.params
39 |
40 | return (
41 | User id: {userID}
26 |-
27 |
- foo task 28 |
- bar task 29 |
42 |
45 | )
46 | }
47 | }
48 |
49 | render((
50 | User ID: {userID}
43 |Task ID: {taskID}
44 |
12 |
18 |
19 |
34 |
35 | )
36 | }
37 | }
38 |
39 | App.title = 'Home'
40 | App.path = '/'
41 |
42 |
43 | class Products extends React.Component {
44 | render() {
45 | return (
46 |
47 |
49 | )
50 | }
51 | }
52 |
53 | Products.title = 'Products'
54 | Products.path = '/products'
55 |
56 | class Orders extends React.Component {
57 | render() {
58 | return (
59 | Products
48 |
60 |
62 | )
63 | }
64 | }
65 |
66 | Orders.title = 'Orders'
67 | Orders.path = '/orders'
68 |
69 | render((
70 | Orders
61 |
9 |
15 | )
16 | }
17 | })
18 |
19 | const Dashboard = React.createClass({
20 | render() {
21 | return -
10 |
- Dashboard 11 |
- Form 12 |
Dashboard
22 | } 23 | }) 24 | 25 | const Form = withRouter( 26 | React.createClass({ 27 | 28 | componentWillMount() { 29 | this.props.router.setRouteLeaveHook( 30 | this.props.route, 31 | this.routerWillLeave 32 | ) 33 | }, 34 | 35 | getInitialState() { 36 | return { 37 | textValue: 'ohai' 38 | } 39 | }, 40 | 41 | routerWillLeave() { 42 | if (this.state.textValue) 43 | return 'You have unsaved information, are you sure you want to leave this page?' 44 | }, 45 | 46 | handleChange(event) { 47 | this.setState({ 48 | textValue: event.target.value 49 | }) 50 | }, 51 | 52 | handleSubmit(event) { 53 | event.preventDefault() 54 | 55 | this.setState({ 56 | textValue: '' 57 | }, () => { 58 | this.props.router.push('/') 59 | }) 60 | }, 61 | 62 | render() { 63 | return ( 64 |
65 |
70 |
71 | )
72 | }
73 | })
74 | )
75 |
76 | render((
77 |
47 |
48 |
57 | )
58 | }
59 | })
60 | )
61 |
62 | const Taco = React.createClass({
63 | remove() {
64 | this.props.onRemoveTaco(this.props.params.name)
65 | },
66 |
67 | render() {
68 | return (
69 | -
49 | {links}
50 |
52 | {this.props.children && React.cloneElement(this.props.children, {
53 | onRemoveTaco: this.handleRemoveTaco
54 | })}
55 |
56 |
70 |
73 | )
74 | }
75 | })
76 |
77 | render((
78 | {this.props.params.name}
71 | 72 |
11 |
28 | )
29 | }
30 | }
31 |
32 | class Index extends React.Component {
33 | render() {
34 | return (
35 | APP!
12 |-
13 |
- / 14 |
/ IndexLink
15 |
16 | - /users 17 |
/users IndexLink
18 |
19 | - /users/ryan 20 |
- /users/ryan?foo=bar 22 | 23 |
- /about 24 |
36 |
38 | )
39 | }
40 | }
41 |
42 | class Users extends React.Component {
43 | render() {
44 | return (
45 | Index!
37 |
46 |
49 | )
50 | }
51 | }
52 |
53 | class UsersIndex extends React.Component {
54 | render() {
55 | return (
56 | Users
47 | {this.props.children} 48 |
57 |
59 | )
60 | }
61 | }
62 |
63 | class User extends React.Component {
64 | render() {
65 | return (
66 | UsersIndex
58 |
67 |
69 | )
70 | }
71 | }
72 |
73 | class About extends React.Component {
74 | render() {
75 | return (
76 | User {this.props.params.id}
68 |
77 |
79 | )
80 | }
81 | }
82 |
83 | render((
84 | About
78 |
10 | {props.children}
11 |
12 | )
13 | }
14 |
15 | const Form = withRouter(
16 | createClass({
17 |
18 | getInitialState() {
19 | return {
20 | value: ''
21 | }
22 | },
23 |
24 | submitAction(event) {
25 | event.preventDefault()
26 | this.props.router.push({
27 | pathname: '/page',
28 | query: {
29 | qsparam: this.state.value
30 | }
31 | })
32 | },
33 |
34 | handleChange(event) {
35 | this.setState({ value: event.target.value })
36 | },
37 |
38 | render() {
39 | return (
40 |
47 | )
48 | }
49 | })
50 | )
51 |
52 | function Page() {
53 | return Hey, I see you are authenticated. Welcome!
54 | } 55 | 56 | function ErrorPage() { 57 | returnOh no! Your auth failed!
58 | } 59 | 60 | function requireCredentials(nextState, replace, next) { 61 | const query = nextState.location.query 62 | if (query.qsparam) { 63 | serverAuth(query.qsparam) 64 | .then( 65 | () => next(), 66 | () => { 67 | replace('/error') 68 | next() 69 | } 70 | ) 71 | } else { 72 | replace('/error') 73 | next() 74 | } 75 | } 76 | 77 | function serverAuth(authToken) { 78 | return new Promise((resolve, reject) => { 79 | // That server is gonna take a while 80 | setTimeout(() => { 81 | if(authToken === 'pancakes') { 82 | resolve('authenticated') 83 | } else { 84 | reject('nope') 85 | } 86 | }, 200) 87 | }) 88 | } 89 | 90 | render(( 91 |
11 |
22 | {React.cloneElement(this.props.children, {
23 | key: this.props.location.pathname
24 | })}
25 |
26 |
27 |
28 | )
29 | }
30 | }
31 |
32 |
33 | class Index extends Component {
34 | render() {
35 | return (
36 | -
12 |
- Page 1 13 |
- Page 2 14 |
37 |
40 | )
41 | }
42 | }
43 |
44 | class Page1 extends Component {
45 | render() {
46 | return (
47 | Index
38 |Animations with React Router are not different than any other animation.
39 |
48 |
51 | )
52 | }
53 | }
54 |
55 | class Page2 extends Component {
56 | render() {
57 | return (
58 | Page 1
49 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. 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.
50 |
59 |
62 | )
63 | }
64 | }
65 |
66 | render((
67 | Page 2
60 |Consectetur adipisicing elit, sed 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.
61 |
13 |
16 | )
17 | }
18 | }
19 |
20 | class Hello extends Component {
21 | render() {
22 | return Parent
14 | {this.props.children} 15 |Hello
23 | }
24 | }
25 |
26 | class Goodbye extends Component {
27 | render() {
28 | return Goodbye
29 | }
30 | }
31 |
32 | it('works with index routes', function () {
33 | const routes = createRoutesFromReactChildren(
34 |
13 |
18 | )
19 | }
20 | }
21 |
22 | class CategorySidebar extends Component {
23 | render() {
24 | const category = data.lookupCategory(this.props.params.category)
25 |
26 | return (
27 | {category.name}
14 | {this.props.children || ( 15 |{category.description}
16 | )} 17 |
28 | ◀︎ Back
29 |
38 | )
39 | }
40 | }
41 |
42 | class Item extends Component {
43 | render() {
44 | const { category, item } = this.props.params
45 | const menuItem = data.lookupItem(category, item)
46 |
47 | return (
48 | {category.name} Items
30 |-
31 | {category.items.map((item, index) => (
32 |
- 33 | {item.name} 34 | 35 | ))} 36 |
49 |
52 | )
53 | }
54 | }
55 |
56 | class Index extends Component {
57 | render() {
58 | return (
59 | {menuItem.name}
50 |${menuItem.price}
51 |
60 |
66 | )
67 | }
68 | }
69 |
70 | class IndexSidebar extends Component {
71 | render() {
72 | return (
73 | Sidebar
61 |62 | Routes can have multiple components, so that all portions of your UI 63 | can participate in the routing. 64 |
65 |
74 |
83 | )
84 | }
85 | }
86 |
87 | class App extends Component {
88 | render() {
89 | const { content, sidebar } = this.props
90 |
91 | return (
92 | Categories
75 |-
76 | {data.getAll().map((category, index) => (
77 |
- 78 | {category.name} 79 | 80 | ))} 81 |
93 |
100 | )
101 | }
102 | }
103 |
104 | render((
105 |
94 | {sidebar ||
96 |
97 | {content ||
99 | parent {this.props.children}
14 | }
15 | }
16 |
17 | class Child extends Component {
18 | render() {
19 | return child
20 | }
21 | }
22 |
23 | let node
24 | beforeEach(function () {
25 | node = document.createElement('div')
26 | })
27 |
28 | afterEach(function () {
29 | unmountComponentAtNode(node)
30 | })
31 |
32 | it("renders when its parent's URL matches exactly", function (done) {
33 | render((
34 |
16 |
23 | )
24 | }
25 | }
26 |
27 | class Dashboard extends Component {
28 | render() {
29 | return (
30 | App
17 | About{' '} 18 | Dashboard 19 |
20 | {this.props.children}
21 |
22 |
31 |
33 | )
34 | }
35 | }
36 |
37 | class About extends Component {
38 | render() {
39 | return (
40 | The Dashboard
32 |
41 |
43 | )
44 | }
45 | }
46 |
47 | const DashboardRoute = {
48 | path: '/dashboard',
49 | component: Dashboard
50 | }
51 |
52 | const AboutRoute = {
53 | path: '/about',
54 | component: About
55 | }
56 |
57 | const RedirectRoute = {
58 | path: '/company',
59 | onEnter(nextState, replaceState) {
60 | replaceState(null, '/about')
61 | }
62 | }
63 |
64 | const routes = {
65 | path: '/',
66 | component: App,
67 | childRoutes: [ DashboardRoute, AboutRoute, RedirectRoute ]
68 | }
69 |
70 | it('works', function (done) {
71 | shouldWarn('has been renamed')
72 |
73 | match({ routes, location: '/dashboard' }, function (error, redirectLocation, renderProps) {
74 | const string = renderToString(
75 | About
42 |
27 |
40 | )
41 | }
42 | })
43 |
44 | const Dashboard = React.createClass({
45 | render() {
46 | const token = auth.getToken()
47 |
48 | return (
49 | -
28 |
- 29 | {this.state.loggedIn ? ( 30 | Log out 31 | ) : ( 32 | Sign in 33 | )} 34 | 35 |
- About 36 |
- Dashboard (authenticated) 37 |
You are {!this.state.loggedIn && 'not'} logged in.
} 39 |
50 |
54 | )
55 | }
56 | })
57 |
58 | const Login = withRouter(
59 | React.createClass({
60 |
61 | getInitialState() {
62 | return {
63 | error: false
64 | }
65 | },
66 |
67 | handleSubmit(event) {
68 | event.preventDefault()
69 |
70 | const email = this.refs.email.value
71 | const pass = this.refs.pass.value
72 |
73 | auth.login(email, pass, (loggedIn) => {
74 | if (!loggedIn)
75 | return this.setState({ error: true })
76 |
77 | const { location } = this.props
78 |
79 | if (location.state && location.state.nextPathname) {
80 | this.props.router.replace(location.state.nextPathname)
81 | } else {
82 | this.props.router.replace('/')
83 | }
84 | })
85 | },
86 |
87 | render() {
88 | return (
89 |
97 | )
98 | }
99 | })
100 | )
101 |
102 | const About = React.createClass({
103 | render() {
104 | return Dashboard
51 |You made it!
52 |{token}
53 |About
105 | } 106 | }) 107 | 108 | const Logout = React.createClass({ 109 | componentDidMount() { 110 | auth.logout() 111 | }, 112 | 113 | render() { 114 | returnYou are now logged out
115 | } 116 | }) 117 | 118 | function requireAuth(nextState, replace) { 119 | if (!auth.loggedIn()) { 120 | replace({ 121 | pathname: '/login', 122 | state: { nextPathname: nextState.location.pathname } 123 | }) 124 | } 125 | } 126 | 127 | render(( 128 |
16 |
24 | {React.cloneElement(this.props.children || , { key: key })}
25 |
26 |
27 | )
28 | }
29 | }
30 |
31 | class Page1 extends Component {
32 | render() {
33 | const { pathname } = this.props.location
34 |
35 | return (
36 | -
17 |
- Page 1 18 |
- Page 2 19 |
37 |
46 | {React.cloneElement(this.props.children || , { key: pathname })}
47 |
48 |
49 | )
50 | }
51 | }
52 |
53 | class Page2 extends Component {
54 | render() {
55 | const { pathname } = this.props.location
56 |
57 | return (
58 | Page 1
38 |-
39 |
- Tab 1 40 |
- Tab 2 41 |
59 |
68 | {React.cloneElement(this.props.children || , { key: pathname })}
69 |
70 |
71 | )
72 | }
73 | }
74 |
75 | class Tab1 extends Component {
76 | render() {
77 | return (
78 | Page 2
60 |-
61 |
- Tab 1 62 |
- Tab 2 63 |
79 |
82 | )
83 | }
84 | }
85 |
86 | class Tab2 extends Component {
87 | render() {
88 | return (
89 | Tab 1
80 |Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 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.
81 |
90 |
93 | )
94 | }
95 | }
96 |
97 | render((
98 | Tab 2
91 |Consectetur adipisicing elit, sed 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.
92 |
89 | { this.props.authenticated ? (
90 |
100 | )
101 | }
102 | }
103 | ```
104 |
105 | The test for that component:
106 |
107 | ```js
108 | //../components/__tests__/BasicPage-test.js
109 |
110 | jest.unmock('../BasicPage')
111 |
112 | import TestUtils from 'react-addons-test-utils'
113 | import ReactDOM from 'react-dom'
114 | import React from 'react'
115 | import BasicPage from '../BasicPage'
116 |
117 | describe('BasicPage', function() {
118 |
119 | it('renders the Login button if not logged in', function() {
120 | let page = TestUtils.renderIntoDocument(
91 |
92 |
93 | ) : (
94 |
95 |
96 |
97 | )
98 | }
99 |