Add routing in main content

package-lock.json

@@ -1686,6 +1686,12 @@
         "@types/node": "*"
       }
     },
+    "@types/history": {
+      "version": "4.7.7",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.7.tgz",
+      "integrity": "sha512-2xtoL22/3Mv6a70i4+4RB7VgbDDORoWwjcqeNysojZA0R7NK17RbY5Gof/2QiFfJgX+KkWghbwJ+d/2SB8Ndzg==",
+      "dev": true
+    },
     "@types/hoist-non-react-statics": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
@@ -1788,6 +1794,27 @@
         "@types/react": "*"
       }
     },
+    "@types/react-router": {
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.8.tgz",
+      "integrity": "sha512-HzOyJb+wFmyEhyfp4D4NYrumi+LQgQL/68HvJO+q6XtuHSDvw6Aqov7sCAhjbNq3bUPgPqbdvjXC5HeB2oEAPg==",
+      "dev": true,
+      "requires": {
+        "@types/history": "*",
+        "@types/react": "*"
+      }
+    },
+    "@types/react-router-dom": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.5.tgz",
+      "integrity": "sha512-ArBM4B1g3BWLGbaGvwBGO75GNFbLDUthrDojV2vHLih/Tq8M+tgvY1DSwkuNrPSwdp/GUL93WSEpTZs8nVyJLw==",
+      "dev": true,
+      "requires": {
+        "@types/history": "*",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",

package.json

@@ -64,6 +64,7 @@
     "@types/node": "^12.12.53",
     "@types/react": "^16.9.43",
     "@types/react-dom": "^16.9.8",
+    "@types/react-router-dom": "^5.1.5",
     "@typescript-eslint/eslint-plugin": "^3.7.0",
     "@typescript-eslint/parser": "^3.7.0",
     "eslint": "^7.5.0",

src/core/App.tsx

 import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
 import styled from 'styled-components';
 import Footer from './components/Footer';
 import Header from './components/Header';
-import Main from './components/Main';
+import MainRouting from './components/MainRouting';
 
 const Container = styled.div`
   height: 100%;
@@ -17,13 +18,15 @@ const MainContent = styled.div`
 
 function App() {
   return (
-    <Container>
-      <Header />
-      <MainContent>
-        <Main />
-      </MainContent>
-      <Footer />
-    </Container>
+    <Router>
+      <Container>
+        <Header />
+        <MainContent>
+          <MainRouting />
+        </MainContent>
+        <Footer />
+      </Container>
+    </Router>
   );
 }
 

src/core/components/Main.tsx

-import React from 'react';
-
-const Main = () => <div>Main</div>;
-
-export default Main;

src/core/components/MainRouting.tsx

+import React from 'react';
+import { Route, Switch } from 'react-router';
+
+const Main = () => (
+  <Switch>
+    <Route path="/" exact>
+      Hello
+    </Route>
+    <Route path="/news">News</Route>
+  </Switch>
+);
+
+export default Main;