From c6fac69a8273ce20216002925deb0a2b5425dc25 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 14 Mar 2021 01:00:49 +0300
Subject: feat: add basic routing

---
 src/components/Header.tsx   |  3 ++-
 src/containers/Home.tsx     | 15 +++++++++++++++
 src/containers/Products.tsx | 26 ++++++++++++++++++++++++++
 src/index.tsx               | 41 +++++++++++++----------------------------
 4 files changed, 56 insertions(+), 29 deletions(-)
 create mode 100644 src/containers/Home.tsx
 create mode 100644 src/containers/Products.tsx

(limited to 'src')

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index e61ac63..75d96a9 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 interface Props {
   navigation: {
@@ -11,7 +12,7 @@ const Header: React.FC<Props> = ({ children, navigation }) => {
   return (
     <header className="bg-black text-white flex">
       {navigation.map(({ name, route }) => (
-        <a href={route} className="py-6 px-8 font-bold tracking-wide hover:underline">{name}</a>
+        <Link to={route} className="py-6 px-8 font-bold tracking-wide hover:underline">{name}</Link>
       ))}
     </header>
   );
diff --git a/src/containers/Home.tsx b/src/containers/Home.tsx
new file mode 100644
index 0000000..7f62186
--- /dev/null
+++ b/src/containers/Home.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import Paper from '../components/Paper';
+import Button from '../components/Button';
+
+const Home: React.FC = () => (
+  <Paper>
+    <p>
+      Привет, мир!
+      <Button>Нажми меня</Button>
+      <Button variant="outlined">Отменить</Button>
+    </p>
+  </Paper>
+);
+
+export default Home;
diff --git a/src/containers/Products.tsx b/src/containers/Products.tsx
new file mode 100644
index 0000000..c96e6a9
--- /dev/null
+++ b/src/containers/Products.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import Paper from '../components/Paper';
+import ListTable from '../components/ListTable';
+
+const fields = [
+  { key: '_id', label: 'ID' },
+  { key: 'name', label: 'Название' },
+  { key: 'type', label: 'Тип' },
+];
+
+const items = [
+  { _id: 1, name: 'Товар 1', type: 'Кондиционер' },
+  { _id: 2, name: 'Товар 2', type: 'Кондиционер' },
+  { _id: 3, name: 'Товар 3', type: 'Кондиционер' },
+  { _id: 4, name: 'Товар 4', type: 'Кондиционер' },
+  { _id: 5, name: 'Товар 5', type: 'Кондиционер' },
+  { _id: 6, name: 'Товар 6', type: 'Кондиционер' },
+];
+
+const Home: React.FC = () => (
+  <Paper>
+    <ListTable items={items} fields={fields} />
+  </Paper>
+);
+
+export default Home;
diff --git a/src/index.tsx b/src/index.tsx
index 4c354f4..169da4c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,43 +1,28 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import 'tailwindcss/tailwind.css';
-import Paper from './components/Paper';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route
+} from 'react-router-dom';
 import Header from './components/Header';
-import Button from './components/Button';
-import ListTable from './components/ListTable';
+import Home from './containers/Home';
+import Products from './containers/Products';
 
 const navigation = [
   { name: 'Главная', route: '/'},
   { name: 'Товары', route: '/products'}
 ];
 
-const fields = [
-  { key: '_id', label: 'ID' },
-  { key: 'name', label: 'Название' },
-  { key: 'type', label: 'Тип' },
-];
-
-const items = [
-  { _id: 1, name: 'Товар 1', type: 'Кондиционер' },
-  { _id: 2, name: 'Товар 2', type: 'Кондиционер' },
-  { _id: 3, name: 'Товар 3', type: 'Кондиционер' },
-  { _id: 4, name: 'Товар 4', type: 'Кондиционер' },
-  { _id: 5, name: 'Товар 5', type: 'Кондиционер' },
-  { _id: 6, name: 'Товар 6', type: 'Кондиционер' },
-];
-
 const App: React.FC = () => (
-  <>
+  <Router>
     <Header navigation={navigation} />
-    <Paper>
-      <p>
-        Привет, мир!
-        <Button>Нажми меня</Button>
-        <Button variant="outlined">Отменить</Button>
-      </p>
-      <ListTable items={items} fields={fields} />
-    </Paper>
-  </>
+    <Switch>
+      <Route exact path="/" component={Home} />
+      <Route exact path="/products" component={Products} />
+    </Switch>
+  </Router>
 );
 
 ReactDOM.render(
-- 
cgit v1.2.3