From 6122bd29223a102781e6fd3498910285f051a977 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chif.gergo@cloud.bme.hu>
Date: Sun, 9 Aug 2020 11:17:11 +0200
Subject: [PATCH] Add routing in main content
---
package-lock.json | 27 +++++++++++++++++++++++++++
package.json | 1 +
src/core/App.tsx | 19 +++++++++++--------
src/core/components/Main.tsx | 5 -----
src/core/components/MainRouting.tsx | 13 +++++++++++++
5 files changed, 52 insertions(+), 13 deletions(-)
delete mode 100644 src/core/components/Main.tsx
create mode 100644 src/core/components/MainRouting.tsx
diff --git a/package-lock.json b/package-lock.json
index c2034fe..ca058e5 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 73c7a6d..beadd1b 100644
--- a/package.json
+++ b/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",
diff --git a/src/core/App.tsx b/src/core/App.tsx
index 3afe7b7..ebed2ef 100644
--- a/src/core/App.tsx
+++ b/src/core/App.tsx
@@ -1,8 +1,9 @@
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>
);
}
diff --git a/src/core/components/Main.tsx b/src/core/components/Main.tsx
deleted file mode 100644
index 5eaae3c..0000000
--- a/src/core/components/Main.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-const Main = () => <div>Main</div>;
-
-export default Main;
diff --git a/src/core/components/MainRouting.tsx b/src/core/components/MainRouting.tsx
new file mode 100644
index 0000000..882d03d
--- /dev/null
+++ b/src/core/components/MainRouting.tsx
@@ -0,0 +1,13 @@
+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;
--
GitLab