move Modal into Router

react-advanced-tag1/src/App.tsx

@@ -9,6 +9,7 @@ import FormsPage from './routes/FormsPage'
 import MemoCallbackPage from './routes/MemoCallbackPage'
 import ComponentWrapperPage from './routes/ComponentWrapperPage'
 import ZustandCounterPage from './routes/ZustandCounterPage'
+import ModalPage from './routes/ModalPage'
 
 function App() {
 
@@ -20,6 +21,7 @@ function App() {
             <Route path="/forms" element={<FormsPage />} />
             <Route path="/memocallback" element={<MemoCallbackPage />} />
             <Route path="/componentwrapper" element={<ComponentWrapperPage />} />
+            <Route path="/modalpage" element={<ModalPage />} />
             <Route path="/zustandcounterpage" element={<ZustandCounterPage />} />
           </Routes>
         </MainLayout>

react-advanced-tag1/src/common/components/Header/Navigation.tsx

@@ -8,6 +8,7 @@ export default function Navigation () {
                 <li><a href="/forms">Forms</a></li>
                 <li><a href="/memocallback">Memo und Callback</a></li>
                 <li><a href="/componentwrapper">Component Wrapper</a></li>
+                <li><a href="/modalpage">Modal</a></li>
                 <li><a href="/zustandcounterpage">ZustandCounterPage</a></li>
             </ul>
         </nav>);

react-advanced-tag1/src/routes/ComponentWrapperPage.tsx

@@ -1,20 +1,11 @@
-import { createPortal } from "react-dom";
 import ComponentWrapper from "../common/components/ComponentWrapper/ComponentWrapper";
-import Modal from "../common/components/Modal";
-import { useState } from "react";
 
 export default function ComponentWrapperPage() {
-  
-  const [modalOpen, setModalOpen] = useState(false);
     return (
       <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
         <ComponentWrapper title='Komponenten Wrapper Test'>
           <h1>Hallo</h1>
         </ComponentWrapper>
-        <ComponentWrapper title='Modal Test'>
-          <button onClick={() => setModalOpen(!modalOpen)}>Toggle Modal</button>
-          {modalOpen && createPortal(<Modal onClose={() => setModalOpen(false)}/>,document.getElementById("modal") as HTMLElement)}
-        </ComponentWrapper>
       </div>
     );
 }

react-advanced-tag1/src/routes/ModalPage.tsx

@@ -0,0 +1,14 @@
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import ComponentWrapper from "../common/components/ComponentWrapper/ComponentWrapper";
+import Modal from "../common/components/Modal";
+
+export default function ModalPage() {
+  const [modalOpen, setModalOpen] = useState(false);
+    return (
+      <ComponentWrapper title='Modal Test'>
+        <button onClick={() => setModalOpen(!modalOpen)}>Toggle Modal</button>
+        {modalOpen && createPortal(<Modal onClose={() => setModalOpen(false)}/>,document.getElementById("modal") as HTMLElement)}
+      </ComponentWrapper>
+    );
+}