disable StrictMode, add Routing

package.json

@@ -16,6 +16,8 @@
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
     "react-dom": "^17.0.1",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "typescript": "^4.0.3",
     "web-vitals": "^0.2.4"
@@ -46,6 +48,7 @@
   },
   "devDependencies": {
     "@types/bootstrap": "^5.0.1",
-    "@types/react-bootstrap": "^0.32.25"
+    "@types/react-bootstrap": "^0.32.25",
+    "@types/react-router-dom": "^5.1.6"
   }
 }

src/App.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "./index.css";
-import { Dashboard, Loading } from "./components";
-//import { withRouter } from "react-router-dom";
+import { Routes, Loading } from "./components";
 import moment from "moment";
 import * as get from "./lib/getters";
 import { domain, wsLocation } from "./config";
@@ -151,7 +150,7 @@ class App extends React.Component<IProps, IState> {
 
   render() {
     if (this.state.loading) return <Loading />;
-    return <Dashboard {...this.state} />;
+    return <Routes {...this.state} />;
   }
 
   componentDidMount() {
@@ -168,4 +167,3 @@ class App extends React.Component<IProps, IState> {
 }
 
 export default App;
-//export default withRouter(App);

src/components/Dashboard/index.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import Blocks from "./Blocks";
 import Council from "../Council";
 import Nominators from "./Nominators";
@@ -38,10 +39,16 @@ const Dashboard = (props: IProps) => {
         {block}
       </div>
       <Blocks blocks={blocks} />
-      <Council council={council} />
+      <Link to={"/council"}>
+        <Council council={council} />
+      </Link>
       <div className="d-flex flex-row">
-        <Validators validators={validators} />
-        <Nominators nominators={nominators} />
+        <Link to={"/validators"}>
+          <Validators validators={validators} />
+        </Link>
+        <Link to={"/nominators"}>
+          <Nominators nominators={nominators} />
+        </Link>
       </div>
     </div>
   );

src/components/Routes/index.tsx

@@ -0,0 +1,18 @@
+import { Switch, Route } from "react-router-dom";
+import { Council, Dashboard, Proposals, Proposal } from "..";
+
+const Routes = (props: any) => {
+  return (
+    <Switch>
+      <Route path="/proposals" render={() => <Proposals {...props} />} />
+      <Route
+        path="/proposal/:id"
+        render={(routeprops) => <Proposal {...routeprops} {...props} />}
+      />
+      <Route path="/council" render={() => <Council {...props} />} />
+      <Route path="/" render={() => <Dashboard {...props} />} />
+    </Switch>
+  );
+};
+
+export default Routes;

src/components/Routes/index.tsx~

@@ -0,0 +1,9 @@
+import { Switch, Route } from "react-router-dom"
+import Dashboard from "../Dashboard"
+
+const Routes = (props:any) => {
+
+return <Switch><Route path="/" component={Dashboard} {...props}></Switch>
+}
+
+export default Routes

src/components/index.ts

@@ -1,3 +1,5 @@
+export { default as Routes } from "./Routes"
+
 export { default as Council } from "./Council"
 export { default as Dashboard } from "./Dashboard";
 export { default as Loading } from "./Loading";

src/index.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { BrowserRouter as Router } from "react-router-dom";
 import "./index.css";
 import App from "./App";
 
 ReactDOM.render(
-  <React.StrictMode>
+  <Router>
     <App />
-  </React.StrictMode>,
+  </Router>,
   document.getElementById("root")
 );