{"id":71,"date":"2022-12-13T00:19:42","date_gmt":"2022-12-12T15:19:42","guid":{"rendered":"http:\/\/blog.defree.co.kr\/?p=71"},"modified":"2022-12-13T00:19:42","modified_gmt":"2022-12-12T15:19:42","slug":"fmap-react-router-%ea%b8%b0%eb%b3%b8-%ea%b5%ac%ec%84%b1-jsx-%ec%8a%a4%ed%83%80%ec%9d%bc","status":"publish","type":"post","link":"https:\/\/blog.defree.co.kr\/?p=71","title":{"rendered":"fmap react-router \uae30\ubcf8 \uad6c\uc131 (jsx \uc2a4\ud0c0\uc77c)"},"content":{"rendered":"\n

router \ud328\ud0a4\uc9c0 \ucd94\uac00<\/h2>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
yarn add react-router-dom<\/span><\/span>\nyarn add --dev cross-env<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\ud398\uc774\uc9c0 1 : src\/pages\/Project.js<\/h2>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
function<\/span> <\/span>Project<\/span>()<\/span> <\/span>{<\/span><\/span>\n    <\/span>return<\/span> (<\/span><\/span>\n        <\/span><<\/span>div<\/span>><\/span><\/span>\n            <\/span><<\/span>div<\/span>><\/span>project setting & loading<\/span><\/<\/span>div<\/span>><\/span><\/span>\n        <\/span><\/<\/span>div<\/span>><\/span><\/span>\n    )<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>default<\/span> Project<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\ud398\uc774\uc9c0 2 : src\/pages\/Host.js<\/h2>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
function<\/span> <\/span>Host<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>div<\/span>><\/span><\/span>\n      <\/span><<\/span>form<\/span>><\/span><\/span>\n        <\/span><<\/span>label<\/span> <\/span>For<\/span>=<\/span>"<\/span>address<\/span>"<\/span>><\/span>address<\/span><\/<\/span>label<\/span>><\/span><\/span>\n        <\/span><<\/span>input<\/span> <\/span>name<\/span>=<\/span>"<\/span>address<\/span>"<\/span>><\/<\/span>input<\/span>><\/span><\/span>\n        <\/span><<\/span>label<\/span> <\/span>For<\/span>=<\/span>"<\/span>port<\/span>"<\/span>><\/span>port<\/span><\/<\/span>label<\/span>><\/span><\/span>\n        <\/span><<\/span>input<\/span> <\/span>name<\/span>=<\/span>"<\/span>port<\/span>"<\/span>><\/<\/span>input<\/span>><\/span><\/span>\n      <\/span><\/<\/span>form<\/span>><\/span><\/span>\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>default<\/span> Host<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\ud398\uc774\uc9c0 3 : src\/pages\/HostAnalysis.js<\/h2>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
function<\/span> <\/span>HostAnalysis<\/span>()<\/span> <\/span>{<\/span><\/span>\n    <\/span>return<\/span> (<\/span><\/span>\n        <\/span><<\/span>div<\/span>><\/span>host: <\/span><\/<\/span>div<\/span>><\/span><\/span>\n    )<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>default<\/span> HostAnalysis<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Navigation : src\/pages\/Root.js<\/h2>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> React <\/span>from<\/span> <\/span>"<\/span>react<\/span>"<\/span>;<\/span><\/span>\nimport<\/span> <\/span>{<\/span>Link<\/span>,<\/span> <\/span>Route<\/span>,<\/span> <\/span>BrowserRouter<\/span>,<\/span> <\/span>Routes<\/span>,<\/span> <\/span>Outlet<\/span>}<\/span> <\/span>from<\/span> <\/span>"<\/span>react-router-dom<\/span>"<\/span>;<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>default<\/span> <\/span>function<\/span> <\/span>Root<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>div<\/span>><\/span><\/span>\n      <\/span><<\/span>Link<\/span> <\/span>to<\/span>=<\/span>"<\/span>\/projects<\/span>"<\/span>><\/span><\/span>\n        <\/span><<\/span>button<\/span>><\/span>Projects<\/span><\/<\/span>button<\/span>><\/span><\/span>\n      <\/span><\/<\/span>Link<\/span>><\/span><\/span>\n      <\/span><<\/span>Link<\/span> <\/span>to<\/span>=<\/span>"<\/span>\/host<\/span>"<\/span>><\/span><\/span>\n        <\/span><<\/span>button<\/span>><\/span>Host<\/span><\/<\/span>button<\/span>><\/span><\/span>\n      <\/span><\/<\/span>Link<\/span>><\/span><\/span>\n      <\/span><<\/span>Link<\/span> <\/span>to<\/span>=<\/span>"<\/span>\/hostAnalysis<\/span>"<\/span>><\/span><\/span>\n        <\/span><<\/span>button<\/span>><\/span>HostAnalysis<\/span><\/<\/span>button<\/span>><\/span><\/span>\n      <\/span><\/<\/span>Link<\/span>><\/span><\/span>\n      <\/span><<\/span>Outlet<\/span>\/><\/span><\/span>\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n};<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
\uc5d0\ub7ec \ud398\uc774\uc9c0 : src\/pages\/NotFound.js<\/h2>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>{<\/span> <\/span>useRouteError<\/span>,<\/span> <\/span>Link<\/span>,<\/span> <\/span>Routes<\/span>,<\/span> <\/span>Route<\/span>,<\/span> <\/span>BrowserRouter<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>"<\/span>react-router-dom<\/span>"<\/span>;<\/span><\/span>\nimport<\/span> Root <\/span>from<\/span> <\/span>"<\/span>.\/Root<\/span>"<\/span>;<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>NotFound<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>error<\/span> <\/span>=<\/span> <\/span>useRouteError<\/span>()<\/span>;<\/span><\/span>\n  <\/span>console<\/span>.<\/span>error<\/span>(<\/span>error<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>BrowserRouter<\/span>><\/span><\/span>\n  <\/span><<\/span>div<\/span> <\/span>id<\/span>=<\/span>"<\/span>not-found-root<\/span>"<\/span>><\/span><\/span>\n      <\/span><<\/span>h1<\/span>><\/span>Oops!<\/span><\/<\/span>h1<\/span>><\/span><\/span>\n      <\/span><<\/span>p<\/span>><\/span>Sorry, an unexpected error has occured.<\/span><\/<\/span>p<\/span>><\/span><\/span>\n      <\/span><<\/span>p<\/span>><<\/span>i<\/span>>{<\/span>error<\/span>.<\/span>statusText <\/span>||<\/span> error<\/span>.<\/span>message<\/span>}<\/<\/span>i<\/span>><\/<\/span>p<\/span>><\/span><\/span>\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n    <\/span><<\/span>Routes<\/span>><\/span><\/span>\n      <\/span><<\/span>Link<\/span> <\/span>to<\/span>=<\/span>"<\/span>\/<\/span>"<\/span>><\/span>go home.<\/span><\/<\/span>Link<\/span>><\/span><\/span>\n      <\/span><<\/span>Route<\/span> <\/span>path<\/span>=<\/span>"<\/span>\/<\/span>"<\/span> <\/span>component<\/span>={<<\/span>Root<\/span>\/>}><\/span>root<\/span><\/<\/span>Route<\/span>><\/span><\/span>\n    <\/span><\/<\/span>Routes<\/span>><\/span><\/span>\n    <\/span><\/<\/span>BrowserRouter<\/span>><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>default<\/span> NotFound<\/span>;<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
Route : index.js<\/h2>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> React <\/span>from<\/span> <\/span>'<\/span>react<\/span>'<\/span>;<\/span><\/span>\nimport<\/span> ReactDOM <\/span>from<\/span> <\/span>'<\/span>react-dom\/client<\/span>'<\/span>;<\/span><\/span>\nimport<\/span> <\/span>'<\/span>.\/index.css<\/span>'<\/span>;<\/span><\/span>\nimport<\/span> <\/span>{<\/span><\/span>\n  <\/span>createBrowserRouter<\/span><\/span>\n  <\/span>,<\/span> <\/span>RouterProvider<\/span><\/span>\n  <\/span>,<\/span> <\/span>Route<\/span><\/span>\n  <\/span>,<\/span> <\/span>createRoutesFromElements<\/span><\/span>\n  <\/span>,<\/span> <\/span>BrowserRouter<\/span><\/span>\n}<\/span> <\/span>from<\/span> <\/span>"<\/span>react-router-dom<\/span>"<\/span><\/span>\nimport<\/span> Root <\/span>from<\/span> <\/span>"<\/span>.\/pages\/Root<\/span>"<\/span>;<\/span><\/span>\nimport<\/span> NotFound <\/span>from<\/span> <\/span>'<\/span>.\/pages\/NotFound<\/span>'<\/span>;<\/span><\/span>\nimport<\/span> App <\/span>from<\/span> <\/span>'<\/span>.\/App<\/span>'<\/span>;<\/span><\/span>\nimport<\/span> Project <\/span>from<\/span> <\/span>"<\/span>.\/pages\/Project<\/span>"<\/span>;<\/span><\/span>\nimport<\/span> Host <\/span>from<\/span> <\/span>"<\/span>.\/pages\/Host<\/span>"<\/span>;<\/span><\/span>\nimport<\/span> HostAnalysis <\/span>from<\/span> <\/span>"<\/span>.\/pages\/HostAnalysis<\/span>"<\/span>;<\/span><\/span>\n<\/span>\nconst<\/span> router <\/span>=<\/span> <\/span>createBrowserRouter<\/span>(<\/span><\/span>\n  <\/span>createRoutesFromElements<\/span>(<\/span><\/span>\n    <\/span><<\/span>Route<\/span> <\/span>path<\/span>=<\/span>"<\/span>\/<\/span>"<\/span> <\/span>element<\/span>={<<\/span>Root<\/span>\/>} <\/span>errorElement<\/span>={<<\/span>NotFound<\/span>\/>}><\/span><\/span>\n      <\/span><<\/span>Route<\/span> <\/span>errorElement<\/span>={<<\/span>NotFound<\/span>\/>}><\/span><\/span>\n        <\/span><<\/span>Route<\/span> <\/span>path<\/span>=<\/span>"<\/span>\/projects<\/span>"<\/span> <\/span>element<\/span>={<<\/span>Project<\/span>\/>}><\/<\/span>Route<\/span>><\/span><\/span>\n        <\/span><<\/span>Route<\/span> <\/span>path<\/span>=<\/span>"<\/span>\/host<\/span>"<\/span> <\/span>element<\/span>={<<\/span>Host<\/span>\/>}><\/<\/span>Route<\/span>><\/span><\/span>\n        <\/span><<\/span>Route<\/span> <\/span>path<\/span>=<\/span>"<\/span>\/hostAnalysis<\/span>"<\/span> <\/span>element<\/span>={<<\/span>HostAnalysis<\/span>\/>}><\/<\/span>Route<\/span>><\/span><\/span>\n      <\/span><\/<\/span>Route<\/span>><\/span><\/span>\n    <\/span><\/<\/span>Route<\/span>><\/span><\/span>\n  )<\/span><\/span>\n)<\/span>;<\/span><\/span>\n<\/span>\nconst<\/span> documentBodyRoot <\/span>=<\/span> ReactDOM<\/span>.<\/span>createRoot<\/span>(document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>root<\/span>'<\/span>))<\/span>;<\/span><\/span>\ndocumentBodyRoot<\/span>.<\/span>render<\/span>(<\/span><\/span>\n  <\/span><<\/span>React.StrictMode<\/span>><\/span><\/span>\n    <\/span><<\/span>RouterProvider<\/span> <\/span>router<\/span>={<\/span>router<\/span>}><\/<\/span>RouterProvider<\/span>><\/span><\/span>\n  <\/span><\/<\/span>React.StrictMode<\/span>><\/span><\/span>\n)<\/span>;<\/span><\/span>\n<\/span>\n<\/span><\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
router \ud328\ud0a4\uc9c0 \ucd94\uac00 \ud398\uc774\uc9c0 1 : src\/pages\/Project.js \ud398\uc774\uc9c0 2 : src\/pages\/Host.js \ud398\uc774\uc9c0 3 : src\/pages\/HostAnalysis.js Navigation : src\/pages\/Root.js \uc5d0\ub7ec \ud398\uc774\uc9c0 : src\/pages\/NotFound.js Route : index.js<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-71","post","type-post","status-publish","format-standard","hentry","category-1","post-preview"],"_links":{"self":[{"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/71","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=71"}],"version-history":[{"count":1,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/71\/revisions"}],"predecessor-version":[{"id":72,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/71\/revisions\/72"}],"wp:attachment":[{"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=71"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=71"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=71"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}