3 adds a simple router

package.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "@openzeppelin/cli": "^2.8.2",
     "@openzeppelin/contracts-ethereum-package": "^3.0.0",
+    "@reach/router": "^1.3.3",
     "@web3-react/core": "^6.0.9",
     "@web3-react/injected-connector": "^6.0.7",
     "ethers": "^4.0.47",

src/App.tsx

@@ -1,8 +1,10 @@
 import React from "react";
+import { Router, Link } from "@reach/router";
 import Layout from "./Layout";
 import { Web3ReactProvider } from '@web3-react/core'
 
 import Main from "./Main";
+import IpfsPage from "./IpfsPage";
 import Web3 from "web3";
 
 const getLibrary = (provider: any): Web3 => {
@@ -12,7 +14,10 @@ const getLibrary = (provider: any): Web3 => {
 const App: React.FC = () => (
   <Web3ReactProvider getLibrary={getLibrary}>
     <Layout>
-      <Main></Main>
+      <Router>
+        <Main path="/" />
+        <IpfsPage path="ipfs" />
+      </Router>
     </Layout>
   </Web3ReactProvider>
 );

src/IpfsPage.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+
+const IpfsPage: React.FC = () => {
+
+  return (
+    <div>
+      <p>
+        ipfs page
+      </p>
+    </div>
+  );
+};
+
+export default IpfsPage;

src/Layout.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
 import { injected } from './connectors'
 import { useWeb3React } from "@web3-react/core";
 import Web3 from "web3";
+import { Link } from "@reach/router";
 
 const Layout: React.FC = ({ children }) => {
   const context = useWeb3React<Web3>()
@@ -15,7 +16,9 @@ const Layout: React.FC = ({ children }) => {
     <div>loading...</div>
   ) : (
     <div>
-      <header>Demo</header>
+      <header>
+        Demo [<Link to="/">main</Link> | <Link to="/ipfs">ipfs</Link>]
+      </header>
       <main>{children}</main>
     </div>
   );