{"id":52,"date":"2022-11-29T00:33:00","date_gmt":"2022-11-28T15:33:00","guid":{"rendered":"http:\/\/blog.defree.co.kr\/?p=52"},"modified":"2022-12-01T00:58:24","modified_gmt":"2022-11-30T15:58:24","slug":"fmap-react-router-%ea%b8%b0%eb%b3%b8-%ea%b5%ac%ec%84%b1","status":"publish","type":"post","link":"https:\/\/blog.defree.co.kr\/?p=52","title":{"rendered":"fmap react-router \uae30\ubcf8 \uad6c\uc131"},"content":{"rendered":"\n

router \ud328\ud0a4\uc9c0 \ucd94\uac00<\/h3>\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
src\/Project.js<\/p>\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
src\/Host.js<\/p>\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
src\/HostAnalysis.js<\/p>\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
src\/App.js<\/p>\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>from<\/span> <\/span>"<\/span>react-router-dom<\/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>\nimport<\/span> Project <\/span>from<\/span> <\/span>"<\/span>.\/pages\/Project<\/span>"<\/span>;<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>App<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>BrowserRouter<\/span>><\/span><\/span>\n        <\/span><<\/span>Link<\/span> <\/span>to<\/span>=<\/span>"<\/span>\/<\/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>Routes<\/span>><\/span><\/span>\n        <\/span><<\/span>Route<\/span> <\/span>path<\/span>=<\/span>"<\/span>\/<\/span>"<\/span> <\/span>component<\/span>={<\/span>Project<\/span>}><\/<\/span>Route<\/span>><\/span><\/span>\n        <\/span><<\/span>Route<\/span> <\/span>path<\/span>=<\/span>"<\/span>\/host<\/span>"<\/span> <\/span>component<\/span>={<\/span>Host<\/span>}><\/<\/span>Route<\/span>><\/span><\/span>\n        <\/span><<\/span>Route<\/span> <\/span>path<\/span>=<\/span>"<\/span>\/hostAnalysis<\/span>"<\/span> <\/span>component<\/span>={<\/span>HostAnalysis<\/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> App<\/span>;<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
router \ud328\ud0a4\uc9c0 \ucd94\uac00 src\/Project.js src\/Host.js src\/HostAnalysis.js src\/App.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-52","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\/52","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=52"}],"version-history":[{"count":7,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/52\/revisions"}],"predecessor-version":[{"id":64,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/52\/revisions\/64"}],"wp:attachment":[{"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=52"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=52"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.defree.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}