Fix basename in examples better (#3610)

taion · timdorr · commit 00c44b70ff0a · 2016-07-05T14:32:32.000-04:00
diff --git a/examples/active-links/app.js b/examples/active-links/app.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { render } from 'react-dom'
 import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router'
 
-import withBasename from '../withBasename'
+import withExampleBasename from '../withExampleBasename'
 
 const ACTIVE = { color: 'red' }
 
@@ -59,7 +59,7 @@ const About = () => (
 )
 
 render((
-  <Router history={withBasename(browserHistory, __dirname)}>
+  <Router history={withExampleBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <IndexRoute component={Index}/>
       <Route path="/about" component={About}/>
diff --git a/examples/animations/app.js b/examples/animations/app.js
@@ -3,7 +3,7 @@ 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 withExampleBasename from '../withExampleBasename'
 
 import './app.css'
 
@@ -49,7 +49,7 @@ const Page2 = () => (
 )
 
 render((
-  <Router history={withBasename(browserHistory, __dirname)}>
+  <Router history={withExampleBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <IndexRoute component={Index}/>
       <Route path="page1" component={Page1} />
diff --git a/examples/auth-flow-async-with-query-params/app.js b/examples/auth-flow-async-with-query-params/app.js
@@ -2,7 +2,7 @@ import React, { createClass } from 'react'
 import { render } from 'react-dom'
 import { Router, Route, IndexRoute, browserHistory, Link, withRouter } from 'react-router'
 
-import withBasename from '../withBasename'
+import withExampleBasename from '../withExampleBasename'
 
 function App(props) {
   return (
@@ -88,7 +88,7 @@ function serverAuth(authToken) {
 }
 
 render((
-  <Router history={withBasename(browserHistory, __dirname)}>
+  <Router history={withExampleBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <IndexRoute component={Form} />
       <Route path="page" component={Page} onEnter={requireCredentials}/>
diff --git a/examples/auth-flow/app.js b/examples/auth-flow/app.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link, withRouter } from 'react-router'
 
-import withBasename from '../withBasename'
+import withExampleBasename from '../withExampleBasename'
 import auth from './auth'
 
 const App = React.createClass({
@@ -127,7 +127,7 @@ function requireAuth(nextState, replace) {
 }
 
 render((
-  <Router history={withBasename(browserHistory, __dirname)}>
+  <Router history={withExampleBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <Route path="login" component={Login} />
       <Route path="logout" component={Logout} />
diff --git a/examples/auth-with-shared-root/app.js b/examples/auth-with-shared-root/app.js
@@ -2,9 +2,12 @@ import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router } from 'react-router'
 
-import withBasename from '../withBasename'
+import withExampleBasename from '../withExampleBasename'
 import routes from './config/routes'
 
 render((
-  <Router history={withBasename(browserHistory, __dirname)} routes={routes}/>
+  <Router
+    history={withExampleBasename(browserHistory, __dirname)}
+    routes={routes}
+  />
 ), document.getElementById('example'))
diff --git a/examples/breadcrumbs/app.js b/examples/breadcrumbs/app.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link } from 'react-router'
 
-import withBasename from '../withBasename'
+import withExampleBasename from '../withExampleBasename'
 
 import './app.css'
 
@@ -60,7 +60,7 @@ Orders.title = 'Orders'
 Orders.path = '/orders'
 
 render((
-  <Router history={withBasename(browserHistory, __dirname)}>
+  <Router history={withExampleBasename(browserHistory, __dirname)}>
     <Route path={App.path} component={App}>
       <Route path={Products.path} component={Products} />
       <Route path={Orders.path} component={Orders} />
diff --git a/examples/confirming-navigation/app.js b/examples/confirming-navigation/app.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link, withRouter } from 'react-router'
 
-import withBasename from '../withBasename'
+import withExampleBasename from '../withExampleBasename'
 
 const App = React.createClass({
   render() {
@@ -76,7 +76,7 @@ const Form = withRouter(
 )
 
 render((
-  <Router history={withBasename(browserHistory, __dirname)}>
+  <Router history={withExampleBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <Route path="dashboard" component={Dashboard} />
       <Route path="form" component={Form} />
diff --git a/examples/dynamic-segments/app.js b/examples/dynamic-segments/app.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link, Redirect } from 'react-router'
 
-import withBasename from '../withBasename'
+import withExampleBasename from '../withExampleBasename'
 
 const App = ({ children }) => (
   <div>
@@ -33,7 +33,7 @@ const Task = ({ params: { userID, taskID } }) => (
 )
 
 render((
-  <Router history={withBasename(browserHistory, __dirname)}>
+  <Router history={withExampleBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <Route path="user/:userID" component={User}>
         <Route path="tasks/:taskID" component={Task} />
diff --git a/examples/huge-apps/app.js b/examples/huge-apps/app.js
@@ -2,10 +2,10 @@ import React from 'react'
 import { render } from 'react-dom'
 import { Router, browserHistory } from 'react-router'
 
-import withBasename from '../withBasename'
+import withExampleBasename from '../withExampleBasename'
 import './stubs/COURSES'
 
-const route = {
+const rootRoute = {
   childRoutes: [ {
     path: '/',
     component: require('./components/App'),
@@ -20,7 +20,10 @@ const route = {
 }
 
 render((
-  <Router history={withBasename(browserHistory, __dirname)} routes={route} />
+  <Router
+    history={withExampleBasename(browserHistory, __dirname)}
+    routes={rootRoute}
+  />
 ), document.getElementById('example'))
 
 // I've unrolled the recursive directory loop that is happening above to get a
diff --git a/examples/master-detail/app.js b/examples/master-detail/app.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { render, findDOMNode } from 'react-dom'
 import { browserHistory, Router, Route, IndexRoute, Link, withRouter } from 'react-router'
 
-import withBasename from '../withBasename'
+import withExampleBasename from '../withExampleBasename'
 import ContactStore from './ContactStore'
 
 import './app.css'
@@ -151,7 +151,7 @@ const NotFound = React.createClass({
 })
 
 render((
-  <Router history={withBasename(browserHistory, __dirname)}>
+  <Router history={withExampleBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <IndexRoute component={Index} />
       <Route path="contact/new" component={NewContact} />
diff --git a/examples/nested-animations/app.js b/examples/nested-animations/app.js
@@ -3,7 +3,7 @@ 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 withExampleBasename from '../withExampleBasename'
 
 import './app.css'
 
@@ -74,7 +74,7 @@ const Tab2 = () => (
 )
 
 render((
-  <Router history={withBasename(browserHistory, __dirname)}>
+  <Router history={withExampleBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <Route path="page1" component={Page1}>
         <Route path="tab1" component={Tab1} />
diff --git a/examples/passing-props-to-children/app.js b/examples/passing-props-to-children/app.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link, withRouter } from 'react-router'
 
-import withBasename from '../withBasename'
+import withExampleBasename from '../withExampleBasename'
 
 import './app.css'
 
@@ -78,7 +78,7 @@ const Taco = React.createClass({
 })
 
 render((
-  <Router history={withBasename(browserHistory, __dirname)}>
+  <Router history={withExampleBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <Route path="taco/:name" component={Taco} />
     </Route>
diff --git a/examples/pinterest/app.js b/examples/pinterest/app.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, IndexRoute, Link } from 'react-router'
 
-import withBasename from '../withBasename'
+import withExampleBasename from '../withExampleBasename'
 
 const PICTURES = [
   { id: 0, src: 'http://placekitten.com/601/601' },
@@ -147,7 +147,7 @@ const Picture = React.createClass({
 })
 
 render((
-  <Router history={withBasename(browserHistory, __dirname)}>
+  <Router history={withExampleBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <IndexRoute component={Index}/>
       <Route path="/pictures/:id" component={Picture}/>
diff --git a/examples/query-params/app.js b/examples/query-params/app.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link } from 'react-router'
 
-import withBasename from '../withBasename'
+import withExampleBasename from '../withExampleBasename'
 
 const User = ({ params: { userID }, location: { query } }) => {
   let age = query && query.showAge ? '33' : ''
@@ -27,7 +27,7 @@ const App = ({ children }) => (
 )
 
 render((
-  <Router history={withBasename(browserHistory, __dirname)}>
+  <Router history={withExampleBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <Route path="user/:userID" component={User} />
     </Route>
diff --git a/examples/route-no-match/app.js b/examples/route-no-match/app.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link } from 'react-router'
 
-import withBasename from '../withBasename'
+import withExampleBasename from '../withExampleBasename'
 
 class User extends React.Component {
   render() {
@@ -46,7 +46,7 @@ class PageNotFound extends React.Component {
 }
 
 render((
-  <Router history={withBasename(browserHistory, __dirname)}>
+  <Router history={withExampleBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <Route path="user/:userID" component={User} />
     </Route>
diff --git a/examples/sidebar/app.js b/examples/sidebar/app.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { render } from 'react-dom'
 import { browserHistory, Router, Route, Link } from 'react-router'
 
-import withBasename from '../withBasename'
+import withExampleBasename from '../withExampleBasename'
 import data from './data'
 
 import './app.css'
@@ -84,7 +84,7 @@ const App = ({ content, sidebar }) => (
 )
 
 render((
-  <Router history={withBasename(browserHistory, __dirname)}>
+  <Router history={withExampleBasename(browserHistory, __dirname)}>
     <Route path="/" component={App}>
       <Route path="category/:category" components={{ content: Category, sidebar: CategorySidebar }}>
         <Route path=":item" component={Item} />
diff --git a/examples/withExampleBasename.js b/examples/withExampleBasename.js
@@ -1,7 +1,7 @@
-import useBasename from 'history/lib/useBasename';
+import useBasename from 'history/lib/useBasename'
 
 // This helper is for setting basename on examples with minimal boilerplate. In
 // an actual application, you would build a custom history to set basename.
-export default function withBasename(history, dirname) {
+export default function withExampleBasename(history, dirname) {
   return useBasename(() => history)({ basename: `/${dirname}` })
 }
