WIP: updates to react-router-dom

Author: Ari

examples/Container.js

@@ -1,8 +1,8 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 
 import GitHubForkRibbon from 'react-github-fork-ribbon';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router';
+import {withRouter, Switch, Link, Redirect, Route} from 'react-router-dom';
 
 import styles from './styles.module.css';
 
@@ -11,47 +11,31 @@ const GoogleApiWrapper = __IS_DEV__
   : require('../dist').GoogleApiWrapper;
 
 class Container extends Component {
-  static propTypes = {
-    children: PropTypes.element.isRequired
-  };
+  static propTypes = {};
 
   static contextTypes = {
     router: PropTypes.object
   };
 
-  renderChildren = () => {
-    const { children } = this.props;
-
-    if (!children) return;
-
-    const sharedProps = {
-      google: this.props.google,
-      loaded: this.props.loaded
-    };
-
-    return React.Children.map(children, child =>
-      React.cloneElement(child, sharedProps, {})
-    );
-  };
-
   render() {
-    const { routeMap, routeDef } = this.props;
+    const {children, routes, routeDef} = this.props;
 
     return (
       <div className={styles.container}>
         <GitHubForkRibbon
           href="//github.com/fullstackreact/google-maps-react"
           position="right"
-          target="_blank">
+          target="_blank"
+        >
           Fork me on GitHub
         </GitHubForkRibbon>
 
         <div className={styles.wrapper}>
           <div className={styles.list}>
             <ul>
-              {Object.keys(routeMap).map(key => (
-                <Link activeClassName={styles.active} key={key} to={key}>
-                  <li>{routeMap[key].name}</li>
+              {routes.map(route => (
+                <Link key={route.path} to={route.path}>
+                  <li>{route.name}</li>
                 </Link>
               ))}
             </ul>
@@ -68,7 +52,26 @@ class Container extends Component {
               </h2>
             </div>
 
-            {this.renderChildren()}
+            <Switch>
+              {routes.map(route => (
+                <Route
+                  key={route.name}
+                  path={route.path}
+                  routeDef={route}
+                  routes={routes}
+                  render={routingProps => (
+                    <div>
+                      <route.component
+                        {...routingProps}
+                        google={this.props.google}
+                        loaded={this.props.loaded}
+                      />
+                    </div>
+                  )}
+                />
+              ))}
+              <Redirect path="*" to={'/basic'} />
+            </Switch>
           </div>
         </div>
       </div>
@@ -78,8 +81,10 @@ class Container extends Component {
 
 const Loading = () => <div>Fancy loading container</div>;
 
-export default GoogleApiWrapper({
-  apiKey: __GAPI_KEY__,
-  libraries: ['places', 'visualization'],
-  LoadingContainer: Loading
-})(Container);
+export default withRouter(
+  GoogleApiWrapper({
+    apiKey: __GAPI_KEY__,
+    libraries: ['places', 'visualization'],
+    LoadingContainer: Loading
+  })(Container)
+);

examples/index.js

@@ -2,13 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import {
-  hashHistory,
-  IndexRoute,
-  Link,
   Redirect,
+  Switch,
+  Link,
   Route,
-  Router
-} from 'react-router';
+  BrowserRouter as Router
+} from 'react-router-dom';
 
 import Container from './Container';
 
@@ -22,77 +21,84 @@ import Polygon from './components/withPolygons';
 import Polyline from './components/withPolylines';
 import CustomEvents from './components/resizeEvent';
 
-const routeMap = {
-  basic: {
+const routes = [
+  {
+    path: '/basic',
     name: 'Simple',
     component: Simple
   },
-  markers: {
+  {
+    path: '/markers',
     name: 'Marker',
     component: Marker
   },
-  clickable_markers: {
+  {
+    path: '/clickable_markers',
     name: 'Clickable markers',
     component: ClickableMarkers
   },
-  places: {
+  {
+    path: '/places',
     name: 'Google places',
     component: GooglePlaces
   },
-  autocomplete: {
+  {
+    path: '/autocomplete',
     name: 'Autocomplete',
     component: Autocomplete
   },
-  heatMap: {
+  {
+    path: '/heatMap',
     name: 'Heat Map',
     component: HeatMap
   },
-  polygons: {
+  {
+    path: '/polygons',
     name: 'Polygon',
     component: Polygon
   },
-  polyline: {
+  {
+    path: '/polyline',
     name: 'Polyline',
     component: Polyline
   },
-  onResizeEvent: {
+  {
+    path: '/onResizeEvent',
     name: 'Custom events',
     component: CustomEvents
   }
-};
+];
 
-const createElement = (Component, props) => {
-  const pathname = props.location.pathname.replace('/', '');
-  const routeDef = routeMap[pathname];
+const createElement = (Component, route) => {
+  // const pathname = props.location.pathname.replace('/', '');
+  // const routeDef = routes[pathname];
 
   const newProps = {
-    routeMap,
-    pathname,
-    routeDef
+    key: route.name,
+    route,
+    routes,
+    // pathname,
+    routeDef: route
+    // routeDef
   };
 
-  return <Component {...newProps} {...props} />;
+  return <Component {...newProps} />;
 };
 
-const routes = (
-  <Router createElement={createElement} history={hashHistory}>
-    <Route component={Container} path="/">
-      {Object.keys(routeMap).map(key => {
-        const r = routeMap[key];
-
-        return (
-          <Route key={key} path={key} name={r.name} component={r.component} />
-        );
-      })}
-
-      <IndexRoute component={routeMap.basic.component} />
-    </Route>
+const Routing = (
+  <Router>
+    <Container routes={routes} />
   </Router>
 );
 
+// <Route render={routeProps => createElement(Container, routeProps)} path="/">
+//     {Object.keys(routes).map(key => {
+//       const r = routes[key];
+//     })}
+//     </Route>
 const mountNode = document.querySelector('#root');
 
-if (mountNode) ReactDOM.render(routes, mountNode);
+if (mountNode) ReactDOM.render(Routing, mountNode);
 else {
   const hljs = require('highlight.js');