React Router, styled-components

Author: ahastudio

20230201/react-1/src/App.tsx

@@ -1,7 +1,28 @@
+import Header from './components/Header';
+import Footer from './components/Footer';
+
+import AboutPage from './pages/AboutPage';
+import HomePage from './pages/HomePage';
+import LoginPage from './pages/LoginPage';
+
+const pages = {
+  '/': HomePage,
+  '/about': AboutPage,
+  '/login': LoginPage,
+};
+
 export default function App() {
+  const { pathname } = window.location;
+
+  const Page = Reflect.get(pages, pathname) || HomePage;
+
   return (
-    <p>
-      Hello, world!
-    </p>
+    <div>
+      <Header />
+      <main>
+        <Page />
+      </main>
+      <Footer />
+    </div>
   );
 }

20230201/react-1/src/components/Footer.tsx

@@ -0,0 +1,8 @@
+export default function Footer() {
+  return (
+    <footer>
+      <hr />
+      Footer
+    </footer>
+  );
+}

20230201/react-1/src/components/Header.tsx

@@ -0,0 +1,19 @@
+export default function Header() {
+  return (
+    <header>
+      <nav>
+        <ul>
+          <li>
+            <a href="/">Home</a>
+          </li>
+          <li>
+            <a href="/about">About</a>
+          </li>
+          <li>
+            <a href="/login">Login</a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  );
+}

20230201/react-1/src/pages/AboutPage.tsx

@@ -0,0 +1,8 @@
+export default function AboutPage() {
+  return (
+    <div>
+      <h1>About Demo App</h1>
+      <p>Hello, world!</p>
+    </div>
+  );
+}

20230201/react-1/src/pages/HomePage.tsx

@@ -0,0 +1,8 @@
+export default function HomePage() {
+  return (
+    <div>
+      <h1>Welcome!</h1>
+      <p>Hello, how are you?</p>
+    </div>
+  );
+}

20230201/react-1/src/pages/LoginPage.tsx

@@ -0,0 +1,8 @@
+export default function LoginPage() {
+  return (
+    <div>
+      <h1>Log in</h1>
+      <p>Username / Password</p>
+    </div>
+  );
+}

20230201/react-2/package-lock.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.0",
     "reflect-metadata": "^0.1.13",
     "tsyringe": "^4.7.0",
     "usehooks-ts": "^2.9.1",

20230201/react-2/package.json

@@ -1,7 +1,49 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+
+import { MemoryRouter } from 'react-router-dom';
 
 import App from './App';
 
-test('App', () => {
-  render(<App />);
+const context = describe;
+
+describe('App', () => {
+  function renderApp(path: string) {
+    render((
+      <MemoryRouter initialEntries={[path]}>
+        <App />
+      </MemoryRouter>
+    ));
+  }
+
+  context('when the current page is "/"', () => {
+    it('renders the home page', () => {
+      renderApp('/');
+
+      screen.getByText(/Welcome/);
+    });
+  });
+
+  context('when the current page is "/products"', () => {
+    it('renders the product list page', () => {
+      renderApp('/products');
+
+      screen.getByText(/Product list/);
+    });
+  });
+
+  context('when the current page is "/about"', () => {
+    it('renders the about page', () => {
+      renderApp('/about');
+
+      screen.getByText(/About Demo App/);
+    });
+  });
+
+  context('when the current page is "/login"', () => {
+    it('renders the login page', () => {
+      renderApp('/login');
+
+      screen.getByText(/Username/);
+    });
+  });
 });

20230201/react-2/src/App.test.tsx

@@ -1,9 +1,26 @@
-import Greeting from './components/Greeting';
+import { Routes, Route } from 'react-router-dom';
+
+import Header from './components/Header';
+import Footer from './components/Footer';
+
+import AboutPage from './pages/AboutPage';
+import ProductsPage from './pages/ProductsPage';
+import HomePage from './pages/HomePage';
+import LoginPage from './pages/LoginPage';
 
 export default function App() {
   return (
     <div>
-      <Greeting />
+      <Header />
+      <main>
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/products" element={<ProductsPage />} />
+          <Route path="/about" element={<AboutPage />} />
+          <Route path="/login" element={<LoginPage />} />
+        </Routes>
+      </main>
+      <Footer />
     </div>
   );
 }