From 555239d585f65f0586410391e50ddb447819cd59 Mon Sep 17 00:00:00 2001
From: kuu12 <maaail@hotmail.com>
Date: Tue, 28 Aug 2018 16:05:43 +0800
Subject: [PATCH] Debug

---
 demo/app.jsx                  | 27 ++++++++++----------
 demo/index.html               | 47 +++++++++++++++++++++++++++++++++++
 demo/navigation-bar.jsx       |  1 +
 src/{one-of.js => one-of.jsx} |  5 ++--
 4 files changed, 64 insertions(+), 16 deletions(-)
 create mode 100644 demo/index.html
 rename src/{one-of.js => one-of.jsx} (73%)
diff --git a/demo/app.jsx b/demo/app.jsx
index 81659c5..7ac8797 100644
--- a/demo/app.jsx
+++ b/demo/app.jsx
@@ -34,20 +34,19 @@ class App extends React.Component {
             setToken={this.setToken}
           />
         }
-        <p>
-          <Basic path="/basic" title="Basic Route" />
-          <Parameter path="/parameter/:name/:id" title="URL Parameters" />
-          <Cache path="/cache" title="Cache" autoCache />
-          <Dynamic path="/dynamic/" title="Dynamic Routing" />
-          <Login path="/login" title="Login" setToken={this.setToken} />
-          <Profile path="/profile" title="profile" token={this.state.token} />
-          <Routing>
-            <One path="/exclusive/one" title="Exclusive Route 1" />
-            <Two path="/exclusive/two" title="Exclusive Route 2" autoCache />
-            <Three path="/exclusive/:any" title="Exclusive Route 3" />
-          </Routing>
-          <NotFound notFound title="404 Not Found" />
-        </p>
+        <Basic path="/basic" title="Basic Route" />
+        <Parameter path="/parameter/:name/:id" title="URL Parameters" />
+        <Cache path="/cache" title="Cache" autoCache />
+        <Dynamic path="/dynamic/" title="Dynamic Routing" />
+        <Login path="/login" title="Login" setToken={this.setToken} />
+        <Profile path="/profile" title="profile" token={this.state.token} />
+        <Routing>
+          <One path="/exclusive/one" title="Exclusive Route 1" />
+          <Two path="/exclusive/two" title="Exclusive Route 2" autoCache />
+          <Three path="/exclusive/:any" title="Exclusive Route 3" />
+        </Routing>
+        <NotFound notFound title="404 Not Found" />
+
         <Log id="app" data={this.props} />
       </React.Fragment>
     );
diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..cc69d60
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Demo of Less-Router</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script type="text/javascript">
+    // Single Page Apps for GitHub Pages
+    // https://github.com/rafrex/spa-github-pages
+    // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
+    // ----------------------------------------------------------------------
+    // This script checks to see if a redirect is present in the query string
+    // and converts it back into the correct url and adds it to the
+    // browser's history using window.history.replaceState(...),
+    // which won't cause the browser to attempt to load the new url.
+    // When the single page app is loaded further down in this file,
+    // the correct url will be waiting in the browser's history for
+    // the single page app to route accordingly.
+    (function (l) {
+      if (l.search) {
+        var q = {};
+        l.search.slice(1).split('&').forEach(function (v) {
+          var a = v.split('=');
+          q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
+        });
+        if (q.p !== undefined) {
+          window.history.replaceState(null, null,
+            l.pathname.slice(0, -1) + (q.p || '') +
+            (q.q ? ('?' + q.q) : '') +
+            l.hash
+          );
+        }
+      }
+    }(window.location));
+  </script>
+  <script src="https://cdn.bootcss.com/babel-polyfill/7.0.0-beta.49/polyfill.min.js"></script>
+  <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.production.min.js"></script>
+  <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.production.min.js"></script>
+</head>
+
+<body>
+  <script src="/demo.bundle.js"></script>
+</body>
+
+</html>
diff --git a/demo/navigation-bar.jsx b/demo/navigation-bar.jsx
index 08e371e..2633eea 100644
--- a/demo/navigation-bar.jsx
+++ b/demo/navigation-bar.jsx
@@ -23,6 +23,7 @@ const NavigationBar = ({ router, token, setToken }) => (
       <button name="two" onClick={() => router.push('/exclusive/two')}>Render Second Route</button>
       <button name="three" onClick={() => router.push('/exclusive/foobar')}>Render Third Route</button>
     </div>
+    <br />
   </nav>
 );
 
diff --git a/src/one-of.js b/src/one-of.jsx
similarity index 73%
rename from src/one-of.js
rename to src/one-of.jsx
index 15f17cf..27ecb98 100644
--- a/src/one-of.js
+++ b/src/one-of.jsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import proxy from './proxy';
 import matching from './path/match';
 
@@ -10,10 +11,10 @@ const OneOf = ({ children }) => {
             parentPath, path, proxy.router.pathname,
         );
         if (found) {
-            return !match && cached ? child : <div />;
+            return !match && cached ? child : <div key={path} />;
         } else {
             if (match) found = match;
-            return match || cached ? child : <div />;
+            return match || cached ? child : <div key={path} />;
         }
     });
 };
