diff --git a/package-lock.json b/package-lock.json
index e16806a..c3712c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,9 +16,9 @@
         "@types/node": "^16.11.26",
         "@types/react": "^17.0.39",
         "@types/react-dom": "^17.0.11",
-        "aws-sdk": "^2.1082.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-router-dom": "^6.2.1",
         "react-scripts": "5.0.0",
         "typescript": "^4.5.5",
         "web-vitals": "^2.1.4"
@@ -5733,62 +5733,6 @@
         "ws": "^7.5.5"
       }
     },
-    "node_modules/aws-sdk": {
-      "version": "2.1082.0",
-      "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.1082.0.tgz",
-      "integrity": "sha512-aDrUZ63O/ocuC827ursDqFQAm3jhqsJu1DvMCCFg73y+FK9pXXNHp2mwdi3UeeHvtfxISCLCjuyO3VFd/tpVfA==",
-      "dependencies": {
-        "buffer": "4.9.2",
-        "events": "1.1.1",
-        "ieee754": "1.1.13",
-        "jmespath": "0.16.0",
-        "querystring": "0.2.0",
-        "sax": "1.2.1",
-        "url": "0.10.3",
-        "uuid": "3.3.2",
-        "xml2js": "0.4.19"
-      },
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
-    "node_modules/aws-sdk/node_modules/buffer": {
-      "version": "4.9.2",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
-      "integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
-      "dependencies": {
-        "base64-js": "^1.0.2",
-        "ieee754": "^1.1.4",
-        "isarray": "^1.0.0"
-      }
-    },
-    "node_modules/aws-sdk/node_modules/events": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
-      "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=",
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
-    "node_modules/aws-sdk/node_modules/ieee754": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
-      "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg=="
-    },
-    "node_modules/aws-sdk/node_modules/sax": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz",
-      "integrity": "sha1-e45lYZCyKOgaZq6nSEgNgozS03o="
-    },
-    "node_modules/aws-sdk/node_modules/uuid": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
-      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
-      "deprecated": "Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.",
-      "bin": {
-        "uuid": "bin/uuid"
-      }
-    },
     "node_modules/axe-core": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz",
@@ -6145,7 +6089,8 @@
           "type": "consulting",
           "url": "https://feross.org/support"
         }
-      ]
+      ],
+      "peer": true
     },
     "node_modules/batch": {
       "version": "0.6.1",
@@ -9967,6 +9912,14 @@
         "readable-stream": "^3.6.0"
       }
     },
+    "node_modules/history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -12519,14 +12472,6 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
-    "node_modules/jmespath": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.16.0.tgz",
-      "integrity": "sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==",
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
     "node_modules/js-sdsl": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-2.1.4.tgz",
@@ -15172,15 +15117,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
-      "deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.",
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -15468,6 +15404,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
+      "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
+      "dependencies": {
+        "history": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
+      "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
+      "dependencies": {
+        "history": "^5.2.0",
+        "react-router": "6.2.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@@ -17443,26 +17403,12 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/url": {
-      "version": "0.10.3",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.10.3.tgz",
-      "integrity": "sha1-Ah5NnHcF8hu/N9A861h2dAJ3TGQ=",
-      "dependencies": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      }
-    },
     "node_modules/url-join": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/url-join/-/url-join-0.0.1.tgz",
       "integrity": "sha1-HbSK1CLTQCRpqH99l73r/k+x48g=",
       "peer": true
     },
-    "node_modules/url/node_modules/punycode": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-      "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -18415,23 +18361,6 @@
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
       "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw=="
     },
-    "node_modules/xml2js": {
-      "version": "0.4.19",
-      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz",
-      "integrity": "sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==",
-      "dependencies": {
-        "sax": ">=0.6.0",
-        "xmlbuilder": "~9.0.1"
-      }
-    },
-    "node_modules/xmlbuilder": {
-      "version": "9.0.7",
-      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
-      "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=",
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
     "node_modules/xmlchars": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
@@ -22737,54 +22666,6 @@
         "ws": "^7.5.5"
       }
     },
-    "aws-sdk": {
-      "version": "2.1082.0",
-      "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.1082.0.tgz",
-      "integrity": "sha512-aDrUZ63O/ocuC827ursDqFQAm3jhqsJu1DvMCCFg73y+FK9pXXNHp2mwdi3UeeHvtfxISCLCjuyO3VFd/tpVfA==",
-      "requires": {
-        "buffer": "4.9.2",
-        "events": "1.1.1",
-        "ieee754": "1.1.13",
-        "jmespath": "0.16.0",
-        "querystring": "0.2.0",
-        "sax": "1.2.1",
-        "url": "0.10.3",
-        "uuid": "3.3.2",
-        "xml2js": "0.4.19"
-      },
-      "dependencies": {
-        "buffer": {
-          "version": "4.9.2",
-          "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
-          "integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
-          "requires": {
-            "base64-js": "^1.0.2",
-            "ieee754": "^1.1.4",
-            "isarray": "^1.0.0"
-          }
-        },
-        "events": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
-          "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ="
-        },
-        "ieee754": {
-          "version": "1.1.13",
-          "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
-          "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg=="
-        },
-        "sax": {
-          "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz",
-          "integrity": "sha1-e45lYZCyKOgaZq6nSEgNgozS03o="
-        },
-        "uuid": {
-          "version": "3.3.2",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
-          "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
-        }
-      }
-    },
     "axe-core": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz",
@@ -23050,7 +22931,8 @@
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "peer": true
     },
     "batch": {
       "version": "0.6.1",
@@ -25898,6 +25780,14 @@
         "readable-stream": "^3.6.0"
       }
     },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -27714,11 +27604,6 @@
         }
       }
     },
-    "jmespath": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.16.0.tgz",
-      "integrity": "sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw=="
-    },
     "js-sdsl": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-2.1.4.tgz",
@@ -29560,11 +29445,6 @@
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
       "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw=="
     },
-    "querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA="
-    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -29775,6 +29655,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
+      "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
+      "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.2.1"
+      }
+    },
     "react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@@ -31260,22 +31157,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "url": {
-      "version": "0.10.3",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.10.3.tgz",
-      "integrity": "sha1-Ah5NnHcF8hu/N9A861h2dAJ3TGQ=",
-      "requires": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-          "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
-        }
-      }
-    },
     "url-join": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/url-join/-/url-join-0.0.1.tgz",
@@ -32024,20 +31905,6 @@
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
       "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw=="
     },
-    "xml2js": {
-      "version": "0.4.19",
-      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz",
-      "integrity": "sha512-esZnJZJOiJR9wWKMyuvSE1y6Dq5LCuJanqhxslH2bxM6duahNZ+HMpCLhBQGZkbX6xRf8x1Y2eJlgt2q3qo49Q==",
-      "requires": {
-        "sax": ">=0.6.0",
-        "xmlbuilder": "~9.0.1"
-      }
-    },
-    "xmlbuilder": {
-      "version": "9.0.7",
-      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
-      "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0="
-    },
     "xmlchars": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
diff --git a/package.json b/package.json
index b1a9d35..6c57655 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@types/react-dom": "^17.0.11",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "typescript": "^4.5.5",
     "web-vitals": "^2.1.4"
diff --git a/src/App.tsx b/src/App.tsx
index eb88cdf..e9b9283 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,14 @@
 import React from 'react';
 import { S3Client, ListBucketsCommand } from '@aws-sdk/client-s3';
+import {
+  HashRouter,
+  Link,
+  Routes,
+  Route,
+  PathRouteProps,
+} from "react-router-dom";
 import BucketList from './BucketList';
+import { ObjectList1, ObjectList2 } from './ObjectList';
 import './App.css';
 
 type AppProps = {};
@@ -33,7 +41,7 @@ class App extends React.Component<AppProps, AppState> {
   login = async (e: React.SyntheticEvent) => {
     e.preventDefault();
     console.log("Login with: ", this.state);
-    let client = new S3Client({
+    let c = new S3Client({
       //endpoint: 'https://garage-staging.home.adnab.me',
       logger: console,
       // Necessary to write the full endpoint struct instead of endpoint: 'http://localhost:3811'
@@ -53,13 +61,19 @@ class App extends React.Component<AppProps, AppState> {
       region: 'us-east-1',
     });
 
-    this.setState({client: client});
+    this.setState({client: c});
   };
 
   render() {
     if (this.state.client) {
       return (
-        <BucketList client={ this.state.client } />
+        <HashRouter>
+          <Routes>
+            <Route path="/:bucket/*" element={ <ObjectList2 client={this.state.client} /> } />
+            <Route path="/:bucket" element={ <ObjectList1 client={this.state.client} /> } />
+            <Route path="/" element={<BucketList client={this.state.client} />} />
+          </Routes>
+        </HashRouter>
       );
     } else {
       return (
@@ -73,4 +87,5 @@ class App extends React.Component<AppProps, AppState> {
   }
 }
 
+
 export default App;
diff --git a/src/BucketList.tsx b/src/BucketList.tsx
index d1e0ab3..7128ed3 100644
--- a/src/BucketList.tsx
+++ b/src/BucketList.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import { S3Client, ListBucketsCommand } from '@aws-sdk/client-s3';
 
 type Props = {
@@ -14,13 +15,7 @@ class BucketList extends React.Component<Props, State> {
     buckets: [],
   };
 
-  constructor(props: Props) {
-    super(props);
-
-    this.init();
-  }
-
-  async init() {
+  async componentDidMount() {
     let command = new ListBucketsCommand({});
     try {
       const data = await this.props.client.send(command);
@@ -36,7 +31,7 @@ class BucketList extends React.Component<Props, State> {
     return (
       <ul>
         { this.state.buckets.map((b) =>
-          <li key="{b}">{ b }</li>
+          <li key={ b }><Link to={ "/" + b }>{ b }</Link></li>
         )}
       </ul>
     );
diff --git a/src/ObjectList.tsx b/src/ObjectList.tsx
new file mode 100644
index 0000000..7dcb264
--- /dev/null
+++ b/src/ObjectList.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { S3Client, ListObjectsV2Command } from '@aws-sdk/client-s3';
+
+type Props = {
+  client: S3Client;
+  bucket: string;
+  prefix: string;
+};
+
+type State = {
+  folders: string[];
+  files: string[];
+};
+
+class ObjectList extends React.Component<Props, State> {
+  state = {
+    folders: [],
+    files: [],
+  };
+
+  constructor(props: Props) {
+    super(props);
+  }
+
+  async componentDidMount() {
+    console.log(this.props);
+
+    let command = new ListObjectsV2Command({
+      Bucket: this.props.bucket,
+      Prefix: this.props.prefix,
+      Delimiter: '/',
+    });
+    try {
+      const data = await this.props.client.send(command);
+      console.log("ok", data);
+      this.setState({
+        folders: (data.CommonPrefixes || []).map((cp) => cp.Prefix!),
+        files: (data.Contents || []).map((obj) => obj.Key!),
+      });
+    } catch(error) {
+      console.log("err", error);
+    }
+  }
+
+  render() {
+    return (
+      <ul>
+        { this.state.folders.map((f) =>
+          <li key={f + "/" }>
+            <Link to={ "/" + this.props.bucket + "/" + f }>{ f }</Link>
+          </li>
+        )}
+        { this.state.files.map((f) =>
+          <li key={f}>{ f }</li>
+        )}
+      </ul>
+    );
+  }
+}
+
+
+interface IClient {
+  client: S3Client;
+}
+
+export const ObjectList1 = ({ client }: IClient) => {
+  const params = useParams();
+  const bucket = params["bucket"]!;
+  return <>
+    <ObjectList client={client} bucket={bucket} prefix="" key={bucket} />
+   </>;
+};
+
+export const ObjectList2 = ({ client }: IClient) => {
+  const params = useParams();
+  const bucket = params["bucket"]!;
+  const prefix = params["*"] || "";
+  const key = bucket + "/" + prefix;
+  return <>
+    <ObjectList client={client} bucket={bucket} prefix={prefix} key={key} />
+  </>;
+};