{"id":4281,"date":"2026-02-14T11:48:41","date_gmt":"2026-02-14T02:48:41","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=4281"},"modified":"2026-02-14T12:25:09","modified_gmt":"2026-02-14T03:25:09","slug":"vitereact-page-transitionrouter","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2026\/02\/14\/vitereact-page-transitionrouter\/","title":{"rendered":"[Vite+React]\ud398\uc774\uc9c0\uc804\ud658(\ub77c\uc6b0\ud130)\/Page transition(Router)[MacOS]"},"content":{"rendered":"\n<p>\ud83d\udc49\ud83c\udffb \uc544\ub798\ub294 \ub77c\uc6b0\ud130\ub97c \uc0ac\uc6a9\ud55c \ud654\uba74\uc804\ud658 \ubc29\uc2dd\uc785\ub2c8\ub2e4.<br>Below is how to use the router.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \ub77c\uc6b0\ud130\ub97c \uc0ac\uc6a9\ud558\uac8c \ub418\uba74 \ube0c\ub77c\uc6b0\uc800\uc758 \ub4a4\ub85c\uac00\uae30 \ubc84\ud2bc\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>When using a router, you can use the back button on your browser.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb\uadf8\ub798\uc11c \uc2e4\uc81c \uc6f9\ud398\uc774\uc9c0\uac00 \uc788\ub294\uac83\ucc98\ub7fc \ube0c\ub77c\uc6b0\uc800 \uc8fc\uc18c\ud45c\uc2dc\uc904\uc5d0\uc11c \uc811\uadfc \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<br>So you can access it from your browser address bar as if it were a real webpage.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \ud504\ub85c\uc81d\ud2b8\ub97c \uc124\uce58\ud569\ub2c8\ub2e4.<br>Install the project.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>% npm create vite@latest ReactExample3 --template react-ts\n% cd ReactExample3\n% npm install\n\n# \uc11c\ubc84 \uc2e4\ud589(\uc2e4\ud589\ud14c\uc2a4\ud2b8)\n# Run the server (run test)\n% npm run dev<\/code><\/pre>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \ud504\ub85c\uc81d\ud2b8 \uc124\uce58 \ud6c4 \uc11c\ubc84\uc2e4\ud589\uc774 \uc815\uc0c1\uc801\uc73c\ub85c \ud655\uc778\ub418\uba74 \ub77c\uc6b0\ud130 \ubaa8\ub4c8\uc744 \uc124\uce58\ud569\ub2c8\ub2e4.<br>After the project is installed and the server is running normally, install the router module.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install react-router-dom\n# \ub610\ub294 \/ or\nyarn add react-router-dom<\/code><\/pre>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \uc804\uccb4\ucf54\ub4dc \/ full code<\/p>\n\n\n\n<p>\u2714\ufe0f main.tsx<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom\/client\";\n\/\/ Router\n<strong>import ReactDOM from \"react-dom\/client\";\nimport { BrowserRouter } from \"react-router-dom\";<\/strong>\n\n\/\/import '.\/index.css'\nimport App from \".\/App.tsx\";\n\n<strong>ReactDOM.<\/strong>createRoot(document.getElementById(\"root\")!).render(\n  &lt;StrictMode>\n  <strong>  &lt;BrowserRouter><\/strong>\n      &lt;App \/>\n    <strong>&lt;\/BrowserRouter><\/strong>\n  &lt;\/StrictMode>,\n);\n<\/code><\/pre>\n\n\n\n<p>\u2714\ufe0f App.tsx<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ App.tsx\nimport { useState } from \"react\";\nimport { Routes, Route, NavLink, useMatch } from \"react-router-dom\";\nimport \".\/App.css\";\n\n\/\/ page component\nfunction Home() {\n  return (\n    &lt;div className=\"page\">\n      &lt;h1>\ud83c\udfe0 Home&lt;\/h1>\n      &lt;p>\uc5ec\uae30\ub294 \uba54\uc778 \ud398\uc774\uc9c0\uc785\ub2c8\ub2e4.&lt;\/p>\n      &lt;p>This is the main page.&lt;\/p>\n    &lt;\/div>\n  );\n}\n\nfunction About() {\n  return (\n    &lt;div className=\"page\">\n      &lt;h1>\ud83d\udcd8 About&lt;\/h1>\n      &lt;p>\uc774 \ud504\ub85c\uc81d\ud2b8\ub294 Vite + React \uc608\uc81c\uc785\ub2c8\ub2e4.&lt;\/p>\n      &lt;p>This project is a Vite + React example.&lt;\/p>\n    &lt;\/div>\n  );\n}\n\nfunction Contact() {\n  return (\n    &lt;div className=\"page\">\n      &lt;h1>\ud83d\udcde Contact&lt;\/h1>\n      &lt;p>contact@example.com&lt;\/p>\n    &lt;\/div>\n  );\n}\n\n\/\/ \uba54\uc778 App \ucef4\ud3ec\ub10c\ud2b8\nfunction App() {\n  return (\n    &lt;div className=\"container\">\n      &lt;nav className=\"nav\">\n        &lt;NavLink\n          to=\"\/\"\n          className={({ isActive }) => (isActive ? \"active\" : \"\")}\n        >\n          Home\n        &lt;\/NavLink>\n\n        &lt;NavLink\n          to=\"\/about\"\n          className={({ isActive }) => (isActive ? \"active\" : \"\")}\n        >\n          About\n        &lt;\/NavLink>\n\n        &lt;NavLink\n          to=\"\/contact\"\n          className={({ isActive }) => (isActive ? \"active\" : \"\")}\n        >\n          Contact\n        &lt;\/NavLink>\n      &lt;\/nav>\n\n      &lt;div className=\"content\">\n        &lt;Routes>\n          &lt;Route path=\"\/\" element={&lt;Home \/>} \/>\n          &lt;Route path=\"\/about\" element={&lt;About \/>} \/>\n          &lt;Route path=\"\/contact\" element={&lt;Contact \/>} \/>\n\n          {\/* 404 \ucc98\ub9ac (\uc120\ud0dd\uc0ac\ud56d) *\/}\n          &lt;Route path=\"*\" element={&lt;div>\ud398\uc774\uc9c0\ub97c \ucc3e\uc744 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4 \ud83d\ude05&lt;\/div>} \/>\n        &lt;\/Routes>\n      &lt;\/div>\n    &lt;\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<p>\u2714\ufe0f App.css<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html,\nbody,\n#root {\n    height: 100%;\n    margin: 0;\n    padding: 0;\n}\n\n.container {\n    min-height: 100vh; \n    display: flex;\n    flex-direction: column;\n    align-items: center; \n    justify-content: flex-start; \n    padding: 2rem 1rem;\n    box-sizing: border-box;\n}\n\n.nav {\n    width: 100%;\n    max-width: 800px; \n    display: flex;\n    justify-content: center; \n    gap: 2.5rem;\n    margin-bottom: 2rem;\n    padding: 1rem 0;\n}\n\n.content {\n    width: 100%;\n    max-width: 800px; \n    text-align: center; \n}\n\n.page {\n    padding: 1.5rem;\n    background: #f9f9f9;\n    border-radius: 12px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n<\/code><\/pre>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \uc2a4\ud06c\ub9b0 \uc0f7 \/ ScreenShot<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-home-1024x576.png\" alt=\"\" class=\"wp-image-4303\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-home-1024x576.png 1024w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-home-300x169.png 300w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-home-768x432.png 768w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-home-400x225.png 400w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-home-800x450.png 800w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-home.png 1466w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"547\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-contact-1024x547.png\" alt=\"\" class=\"wp-image-4302\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-contact-1024x547.png 1024w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-contact-300x160.png 300w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-contact-768x410.png 768w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-contact-400x214.png 400w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-contact-800x427.png 800w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-contact.png 1456w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"622\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-about-1024x622.png\" alt=\"\" class=\"wp-image-4301\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-about-1024x622.png 1024w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-about-300x182.png 300w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-about-768x467.png 768w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-about-400x243.png 400w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-about-800x486.png 800w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/02\/react-router-about.png 1452w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udc49\ud83c\udffb \uc544\ub798\ub294 \ub77c\uc6b0\ud130\ub97c \uc0ac\uc6a9\ud55c \ud654\uba74\uc804\ud658 \ubc29\uc2dd\uc785\ub2c8\ub2e4.Below is how to use the router. \ud83d\udc49\ud83c\udffb \ub77c\uc6b0\ud130\ub97c \uc0ac\uc6a9\ud558\uac8c \ub418\uba74 \ube0c\ub77c\uc6b0\uc800\uc758 \ub4a4\ub85c\uac00\uae30 \ubc84\ud2bc\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.When using a router, you can use the back button on your browser. \ud83d\udc49\ud83c\udffb\uadf8\ub798\uc11c \uc2e4\uc81c \uc6f9\ud398\uc774\uc9c0\uac00 \uc788\ub294\uac83\ucc98\ub7fc \ube0c\ub77c\uc6b0\uc800 \uc8fc\uc18c\ud45c\uc2dc\uc904\uc5d0\uc11c \uc811\uadfc \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.So you can access it from your browser address bar as if [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,1,7],"tags":[],"class_list":["post-4281","post","type-post","status-publish","format-standard","hentry","category-react","category-uncategorized","category-website","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/4281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=4281"}],"version-history":[{"count":20,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/4281\/revisions"}],"predecessor-version":[{"id":4305,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/4281\/revisions\/4305"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=4281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=4281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=4281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}