Fix setting basename in examples (#3609)

taion · timdorr · commit 6e50ece4dada · 2016-07-05T14:25:22.000-04:00
diff --git a/examples/active-links/app.js b/examples/active-links/app.js
@@ -2,6 +2,8 @@ import React from 'react'
 import { render } from 'react-dom'
 import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router'
 
+import withBasename from '../withBasename'
+
 const ACTIVE = { color: 'red' }
 
 const App = ({ children }) => (
@@ -57,7 +59,7 @@ const About = () => (
 )
 
 render((
-  <Router history={browserHistory}>
+  <Router history={withBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <IndexRoute component={Index}/>
       <Route path="/about" component={About}/>
diff --git a/examples/active-links/index.html b/examples/active-links/index.html
@@ -1,6 +1,5 @@
 <!doctype html public "restroom">
 <title>Active Links Example</title>
-<base href="/active-links"/>
 <link href="/global.css" rel="stylesheet"/>
 <body>
 <h1 class="breadcrumbs"><a href="/">React Router Examples</a> / Active Links</h1>
diff --git a/examples/animations/app.js b/examples/animations/app.js
@@ -1,7 +1,10 @@
 import React from 'react'
-import { render } from 'react-dom'
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
+import { render } from 'react-dom'
 import { browserHistory, Router, Route, IndexRoute, Link } from 'react-router'
+
+import withBasename from '../withBasename'
+
 import './app.css'
 
 const App = ({ children, location }) => (
@@ -46,7 +49,7 @@ const Page2 = () => (
 )
 
 render((
-  <Router history={browserHistory}>
+  <Router history={withBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <IndexRoute component={Index}/>
       <Route path="page1" component={Page1} />
diff --git a/examples/animations/index.html b/examples/animations/index.html
@@ -1,6 +1,5 @@
 <!doctype html public "restroom">
 <title>Animation Example</title>
-<base href="/animations"/>
 <link href="/global.css" rel="stylesheet"/>
 <link href="/animations/app.css" rel="stylesheet"/>
 <body>
diff --git a/examples/auth-flow-async-with-query-params/app.js b/examples/auth-flow-async-with-query-params/app.js
@@ -1,8 +1,8 @@
 import React, { createClass } from 'react'
 import { render } from 'react-dom'
-import {
-  Router, Route, IndexRoute, browserHistory, Link, withRouter
-} from 'react-router'
+import { Router, Route, IndexRoute, browserHistory, Link, withRouter } from 'react-router'
+
+import withBasename from '../withBasename'
 
 function App(props) {
   return (
@@ -88,7 +88,7 @@ function serverAuth(authToken) {
 }
 
 render((
-  <Router history={browserHistory}>
+  <Router history={withBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <IndexRoute component={Form} />
       <Route path="page" component={Page} onEnter={requireCredentials}/>
diff --git a/examples/auth-flow-async-with-query-params/index.html b/examples/auth-flow-async-with-query-params/index.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <base href="/auth-flow-async-with-query-params"/>
     <meta charset="utf-8">
     <title>Authentication with query parameters</title>
     <link rel="stylesheet" href="/global.css"/>
diff --git a/examples/auth-flow/app.js b/examples/auth-flow/app.js
@@ -1,6 +1,8 @@
 import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link, withRouter } from 'react-router'
+
+import withBasename from '../withBasename'
 import auth from './auth'
 
 const App = React.createClass({
@@ -125,7 +127,7 @@ function requireAuth(nextState, replace) {
 }
 
 render((
-  <Router history={browserHistory}>
+  <Router history={withBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <Route path="login" component={Login} />
       <Route path="logout" component={Logout} />
diff --git a/examples/auth-flow/index.html b/examples/auth-flow/index.html
@@ -1,6 +1,5 @@
 <!doctype html public "display of affection">
 <title>Authentication Flow Example</title>
-<base href="/auth-flow"/>
 <link rel="stylesheet" href="/global.css"/>
 <body>
 <h1 class="breadcrumbs"><a href="/">React Router Examples</a> / Auth Flow</h1>
diff --git a/examples/auth-with-shared-root/app.js b/examples/auth-with-shared-root/app.js
@@ -1,6 +1,10 @@
 import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router } from 'react-router'
+
+import withBasename from '../withBasename'
 import routes from './config/routes'
 
-render(<Router history={browserHistory} routes={routes}/>, document.getElementById('example'))
+render((
+  <Router history={withBasename(browserHistory, __dirname)} routes={routes}/>
+), document.getElementById('example'))
diff --git a/examples/auth-with-shared-root/index.html b/examples/auth-with-shared-root/index.html
@@ -1,6 +1,5 @@
 <!doctype html public "indecency">
 <title>Authentication With Shared Root Example</title>
-<base href="/auth-with-shared-root"/>
 <link rel="stylesheet" href="../global.css"/>
 <body>
 <h1 class="breadcrumbs"><a href="../index.html">React Router Examples</a> / Auth With Shared Root</h1>
diff --git a/examples/breadcrumbs/app.js b/examples/breadcrumbs/app.js
@@ -1,6 +1,9 @@
 import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link } from 'react-router'
+
+import withBasename from '../withBasename'
+
 import './app.css'
 
 const App = ({ children, routes }) => {
@@ -57,7 +60,7 @@ Orders.title = 'Orders'
 Orders.path = '/orders'
 
 render((
-  <Router history={browserHistory}>
+  <Router history={withBasename(browserHistory, __dirname)}>
     <Route path={App.path} component={App}>
       <Route path={Products.path} component={Products} />
       <Route path={Orders.path} component={Orders} />
diff --git a/examples/breadcrumbs/index.html b/examples/breadcrumbs/index.html
@@ -1,6 +1,5 @@
 <!doctype html public "restroom">
 <title>Breadcrumbs Example</title>
-<base href="/breadcrumbs"/>
 <link href="/global.css" rel="stylesheet"/>
 <link href="/animations/app.css" rel="stylesheet"/>
 <body>
diff --git a/examples/confirming-navigation/app.js b/examples/confirming-navigation/app.js
@@ -2,6 +2,8 @@ import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link, withRouter } from 'react-router'
 
+import withBasename from '../withBasename'
+
 const App = React.createClass({
   render() {
     return (
@@ -74,7 +76,7 @@ const Form = withRouter(
 )
 
 render((
-  <Router history={browserHistory}>
+  <Router history={withBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <Route path="dashboard" component={Dashboard} />
       <Route path="form" component={Form} />
diff --git a/examples/confirming-navigation/index.html b/examples/confirming-navigation/index.html
@@ -1,6 +1,5 @@
 <!doctype html public "humiliation">
 <title>Confirming Navigation Example</title>
-<base href="/confirming-navigation"/>
 <link href="/global.css" rel="stylesheet"/>
 <body>
 <h1 class="breadcrumbs"><a href="/">React Router Examples</a> / Confirming Navigation</h1>
diff --git a/examples/dynamic-segments/app.js b/examples/dynamic-segments/app.js
@@ -2,6 +2,8 @@ import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link, Redirect } from 'react-router'
 
+import withBasename from '../withBasename'
+
 const App = ({ children }) => (
   <div>
     <ul>
@@ -31,7 +33,7 @@ const Task = ({ params: { userID, taskID } }) => (
 )
 
 render((
-  <Router history={browserHistory}>
+  <Router history={withBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <Route path="user/:userID" component={User}>
         <Route path="tasks/:taskID" component={Task} />
diff --git a/examples/dynamic-segments/index.html b/examples/dynamic-segments/index.html
@@ -1,6 +1,5 @@
 <!doctype html public "restroom">
 <title>Dynamic Segments Example</title>
-<base href="/dynamic-segments"/>
 <link href="/global.css" rel="stylesheet"/>
 <body>
 <h1 class="breadcrumbs"><a href="/">React Router Examples</a> / Dynamic Segments</h1>
diff --git a/examples/huge-apps/app.js b/examples/huge-apps/app.js
@@ -2,9 +2,10 @@ import React from 'react'
 import { render } from 'react-dom'
 import { Router, browserHistory } from 'react-router'
 
+import withBasename from '../withBasename'
 import './stubs/COURSES'
 
-const rootRoute = {
+const route = {
   childRoutes: [ {
     path: '/',
     component: require('./components/App'),
@@ -18,10 +19,9 @@ const rootRoute = {
   } ]
 }
 
-render(
-  <Router history={browserHistory} routes={rootRoute} />,
-  document.getElementById('example')
-)
+render((
+  <Router history={withBasename(browserHistory, __dirname)} routes={route} />
+), document.getElementById('example'))
 
 // I've unrolled the recursive directory loop that is happening above to get a
 // better idea of just what this huge-apps Router looks like, or just look at the
diff --git a/examples/huge-apps/index.html b/examples/huge-apps/index.html
@@ -1,6 +1,5 @@
 <!doctype html public "embarassment">
 <meta charset="utf-8"/>
-<base href="/huge-apps"/>
 <title>Huge Apps Example</title>
 <link href="/global.css" rel="stylesheet"/>
 <style>
diff --git a/examples/master-detail/app.js b/examples/master-detail/app.js
@@ -1,9 +1,10 @@
 import React from 'react'
 import { render, findDOMNode } from 'react-dom'
-import {
-  browserHistory, Router, Route, IndexRoute, Link, withRouter
-} from 'react-router'
+import { browserHistory, Router, Route, IndexRoute, Link, withRouter } from 'react-router'
+
+import withBasename from '../withBasename'
 import ContactStore from './ContactStore'
+
 import './app.css'
 
 const App = React.createClass({
@@ -150,7 +151,7 @@ const NotFound = React.createClass({
 })
 
 render((
-  <Router history={browserHistory}>
+  <Router history={withBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <IndexRoute component={Index} />
       <Route path="contact/new" component={NewContact} />
diff --git a/examples/master-detail/index.html b/examples/master-detail/index.html
@@ -1,6 +1,5 @@
 <!doctype html public "embarassment">
 <title>Master Detail Example</title>
-<base href="/master-detail"/>
 <link href="/global.css" rel="stylesheet"/>
 <body>
 <h1 class="breadcrumbs"><a href="/">React Router Examples</a> / Master Detail</h1>
diff --git a/examples/nested-animations/app.js b/examples/nested-animations/app.js
@@ -1,7 +1,10 @@
 import React from 'react'
-import { render } from 'react-dom'
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
+import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link } from 'react-router'
+
+import withBasename from '../withBasename'
+
 import './app.css'
 
 const App = ({ children, location: { pathname } }) => {
@@ -71,7 +74,7 @@ const Tab2 = () => (
 )
 
 render((
-  <Router history={browserHistory}>
+  <Router history={withBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <Route path="page1" component={Page1}>
         <Route path="tab1" component={Tab1} />
diff --git a/examples/nested-animations/index.html b/examples/nested-animations/index.html
@@ -1,6 +1,5 @@
 <!doctype html public "restroom">
 <title>Nested Animations Example</title>
-<base href="/nested-animations"/>
 <link href="/global.css" rel="stylesheet"/>
 <body>
 <h1 class="breadcrumbs"><a href="/">React Router Examples</a> / Nested Animations</h1>
diff --git a/examples/passing-props-to-children/app.js b/examples/passing-props-to-children/app.js
@@ -1,6 +1,9 @@
 import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link, withRouter } from 'react-router'
+
+import withBasename from '../withBasename'
+
 import './app.css'
 
 const App = withRouter(
@@ -75,7 +78,7 @@ const Taco = React.createClass({
 })
 
 render((
-  <Router history={browserHistory}>
+  <Router history={withBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <Route path="taco/:name" component={Taco} />
     </Route>
diff --git a/examples/passing-props-to-children/index.html b/examples/passing-props-to-children/index.html
@@ -1,6 +1,5 @@
 <!doctype html public "embarassment">
 <title>Passing Props to Children Example</title>
-<base href="/passing-props-to-children"/>
 <link href="/global.css" rel="stylesheet"/>
 <body>
 <h1 class="breadcrumbs"><a href="/">React Router Examples</a> / Passing Props to Children</h1>
diff --git a/examples/pinterest/app.js b/examples/pinterest/app.js
@@ -2,6 +2,8 @@ import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, IndexRoute, Link } from 'react-router'
 
+import withBasename from '../withBasename'
+
 const PICTURES = [
   { id: 0, src: 'http://placekitten.com/601/601' },
   { id: 1, src: 'http://placekitten.com/610/610' },
@@ -145,7 +147,7 @@ const Picture = React.createClass({
 })
 
 render((
-  <Router history={browserHistory}>
+  <Router history={withBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <IndexRoute component={Index}/>
       <Route path="/pictures/:id" component={Picture}/>
diff --git a/examples/pinterest/index.html b/examples/pinterest/index.html
@@ -1,6 +1,5 @@
 <!doctype html public "restroom">
 <title>Pinterest-style UI Example</title>
-<base href="/pinterest"/>
 <link href="/global.css" rel="stylesheet"/>
 <body>
 <h1 class="breadcrumbs"><a href="/">React Router Examples</a> / Pinterest</h1>
diff --git a/examples/query-params/app.js b/examples/query-params/app.js
@@ -2,6 +2,8 @@ import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link } from 'react-router'
 
+import withBasename from '../withBasename'
+
 const User = ({ params: { userID }, location: { query } }) => {
   let age = query && query.showAge ? '33' : ''
 
@@ -25,7 +27,7 @@ const App = ({ children }) => (
 )
 
 render((
-  <Router history={browserHistory}>
+  <Router history={withBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <Route path="user/:userID" component={User} />
     </Route>
diff --git a/examples/query-params/index.html b/examples/query-params/index.html
@@ -1,6 +1,5 @@
 <!doctype html public "restroom">
 <title>Query Params Example</title>
-<base href="/query-params"/>
 <link href="/global.css" rel="stylesheet"/>
 <body>
 <h1 class="breadcrumbs"><a href="/">React Router Examples</a> / Query Params</h1>
diff --git a/examples/route-no-match/app.js b/examples/route-no-match/app.js
@@ -2,6 +2,8 @@ import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link } from 'react-router'
 
+import withBasename from '../withBasename'
+
 class User extends React.Component {
   render() {
     let { userID } = this.props.params
@@ -44,7 +46,7 @@ class PageNotFound extends React.Component {
 }
 
 render((
-  <Router history={browserHistory}>
+  <Router history={withBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <Route path="user/:userID" component={User} />
     </Route>
diff --git a/examples/route-no-match/index.html b/examples/route-no-match/index.html
@@ -1,6 +1,5 @@
 <!doctype html public "restroom">
 <title>Route Not Found Example</title>
-<base href="/route-no-match"/>
 <link href="/global.css" rel="stylesheet"/>
 <body>
 <h1 class="breadcrumbs"><a href="/">React Router Examples</a> / Route Not Found</h1>
diff --git a/examples/sidebar/app.js b/examples/sidebar/app.js
diff --git a/examples/sidebar/index.html b/examples/sidebar/index.html
diff --git a/examples/webpack.config.js b/examples/webpack.config.js
diff --git a/examples/withBasename.js b/examples/withBasename.js
