라우팅 초기작업

package.json

@@ -17,6 +17,7 @@
     "react-helmet-async": "^1.2.3",
     "react-icons": "^4.3.1",
     "react-loading-icons": "^1.0.8",
+    "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
     "styled-components": "^5.3.3",
     "styled-normalize": "^8.0.7",

src/components/App/App.tsx

@@ -1,18 +1,34 @@
-import logo from 'assets/logo.svg';
 import './App.css';
+import { useLocation, Routes, Route, Navigate } from 'react-router-dom';
+import Layout from 'pages/Layout/Layout';
+import Home from 'pages/Home/Home';
+import Search from 'pages/Search/Search';
+import MyRecipes from 'pages/MyRecipes/MyRecipes';
+import Modal from 'pages/Modal/Modal';
+import PageNotFound from 'pages/PageNotFound/PageNotFound';
 
 export const App = () => {
+  const location = useLocation();
+  const state = location.state as { backgroundLocation?: Location };
+  const backgroundLocation = state?.backgroundLocation;
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <Routes location={backgroundLocation || location}>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Home />} />
+          <Route path="search/:keyword" element={<Search />} />
+          <Route path="my-recipes" element={<MyRecipes />} />
+          <Route path="/detail/:id" element={<Modal />} />
+          <Route path="page-not-found" element={<PageNotFound />} />
+          <Route path="*" element={<Navigate to="page-not-found" replace />} />
+        </Route>
+      </Routes>
+      {backgroundLocation && (
+        <Routes>
+          <Route path="/detail/:id" element={<Modal />} />
+        </Routes>
+      )}
+    </>
   );
 };

src/index.tsx

@@ -1,5 +1,6 @@
 import { StrictMode } from 'react';
 import { render } from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 import { GlobalStyle } from 'styles/GlobalStyle';
 import { defaultTheme } from 'theme/theme';
@@ -10,7 +11,9 @@ render(
   <StrictMode>
     <ThemeProvider theme={defaultTheme}>
       <GlobalStyle />
-      <App />
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
     </ThemeProvider>
   </StrictMode>,
   document.getElementById('root'),

src/pages/Home/Home.tsx

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <div>Home</div>;
+}

src/pages/Layout/Layout.tsx

@@ -0,0 +1,9 @@
+import { Outlet } from 'react-router-dom';
+
+export default function Layout() {
+  return (
+    <main>
+      <Outlet />
+    </main>
+  );
+}

src/pages/Modal/Modal.tsx

@@ -0,0 +1,3 @@
+export default function Modal() {
+  return <div>Modal</div>;
+}

src/pages/MyRecipes/MyRecipes.tsx

@@ -0,0 +1,3 @@
+export default function MyRecipes() {
+  return <div>MyRecipes</div>;
+}

src/pages/PageNotFound/PageNotFound.tsx

@@ -0,0 +1,3 @@
+export default function PageNotFound() {
+  return <div>PageNotFound</div>;
+}

src/pages/Search/Search.tsx

@@ -0,0 +1,3 @@
+export default function Search() {
+  return <div>Search</div>;
+}

yarn.lock

@@ -14287,7 +14287,7 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
-react-router-dom@^6.0.0:
+react-router-dom@^6.0.0, react-router-dom@^6.2.2:
   version "6.2.2"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.2.2.tgz#f1a2c88365593c76b9612ae80154a13fcb72e442"
   integrity sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==