Update Demo

demo/app.jsx

@@ -24,29 +24,32 @@ class App extends React.Component {
 
   render() {
     return (
-      <div id="app">
+      <React.Fragment>
+        <h4>Demo of <a href="https://github.com/kuu12/less-router">Less-Router</a></h4>
         {
           this.props.router.pathname !== '/login' &&
           <NavigationBar
             router={this.props.router}
             token={this.state.token}
+            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>
         <Log id="app" data={this.props} />
-
-        <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" />
-        <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" />
-      </div>
+      </React.Fragment>
     );
   }
 }

demo/cache.jsx

@@ -24,11 +24,18 @@ class Cache extends React.Component {
     clearInterval(this.timer);
   }
   render() {
+    const { router } = this.props;
     return (
       <div id="cache">
         Start Time: {this.state.start}
         <br />
         Counting: {this.state.count}
+        <br />
+        <button name="clear-cache" onClick={async () => {
+          await router.replace('/');
+          await router.clearCache('/cache');
+          console.log('clear');
+        }}>Back to Home Page and Clear Cache</button>
       </div>
     );
   }

demo/index.jsx

@@ -7,6 +7,6 @@ root.id = 'root';
 document.body.appendChild(root);
 
 ReactDOM.render(
-  <App basename="" />,
+  <App basename="/router-demo" />,
   root,
 );

demo/login.jsx

@@ -6,12 +6,17 @@ const Login = ({ router, setToken }) => (
     <label>
       Username: <input defaultValue="kuu12" />
     </label>
+    <br />
     <label>
       Password: <input type="password" defaultValue="foobar" />
     </label>
+    <br />
     <button onClick={() => {
       setToken(true);
-      router.back();
+      router.replace(
+        sessionStorage.getItem('loginRedirect') ||
+        '/'
+      );
     }}>
       Submit
     </button>

demo/navigation-bar.jsx

@@ -1,22 +1,29 @@
-import React from 'react'
+import React from 'react';
 
-const NavigationBar = ({ router, token }) => (
-  <div id="navigation-bar">
+const NavigationBar = ({ router, token, setToken }) => (
+  <nav id="navigation-bar">
     <button name="basic" onClick={() => router.push('/basic')}>Try Basic Use</button>
     <button name="parameter" onClick={() => router.push('/parameter/kuu/12')}>Try URL Parameters </button>
     <button name="cache" onClick={() => router.push('/cache')}>Try Cache</button>
     <button name="dynamic" onClick={() => router.push('/dynamic/')}>Try Dynamic Routing</button>
-    <button name="one" onClick={() => router.push('/exclusive/one')}>Render First Route</button>
-    <button name="two" onClick={() => router.push('/exclusive/two')}>Render Second Route</button>
-    <button name="three" onClick={() => router.push('/exclusive/foobar')}>Render Third Route</button>
-    <button name="profile" onClick={() => {
-      if (token) {
-        router.push('/profile');
-      } else {
-        router.push('/login');
-      }
-    }}>Check Out My Profile</button>
-  </div>
+    <button name="profile" onClick={() => router.push('/profile')}>My Profile (Try Login)</button>
+    {
+      token &&
+      <button name="logout" onClick={() => {
+        if (window.confirm('Logout?')) {
+          setToken(null);
+          router.push('/');
+        }
+      }}>Logout</button>
+    }
+    <br />
+    <div>
+      <span style={{ fontSize: 14 }}>Try Exclusive Routing : </span>
+      <button name="one" onClick={() => router.push('/exclusive/one')}>Render First Route</button>
+      <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>
+  </nav>
 );
 
 export default NavigationBar;

demo/profile.jsx

@@ -1,12 +1,23 @@
 import React from 'react';
 import Routing from '../src';
 
-const Profile = ({ router }) => (
-  <div id="profile">
-    My Profile
-    <br />
-    balance: $ 100.00
-  </div>
-);
+class Profile extends React.Component {
+  componentDidMount() {
+    if (!this.props.token) {
+      sessionStorage.setItem('loginRedirect', '/profile');
+      this.props.router.push('/login');
+      alert('Need Login');
+    }
+  }
+  render() {
+    return (
+      <div id="profile">
+        My Profile
+      <br />
+        balance: $ 100.00
+    </div>
+    );
+  }
+}
 
 export default Routing(Profile);

package.json

@@ -53,4 +53,4 @@
   "jest": {
     "testURL": "http://localhost"
   }
-}
+}