{"id":763,"date":"2025-07-25T08:09:35","date_gmt":"2025-07-25T08:09:35","guid":{"rendered":"https:\/\/serkomi.com\/blog\/?p=763"},"modified":"2025-07-25T08:09:37","modified_gmt":"2025-07-25T08:09:37","slug":"tutorial-lengkap-routing-di-react-router-untuk-pemula","status":"publish","type":"post","link":"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/","title":{"rendered":"Tutorial Lengkap Routing di React Router untuk Pemula"},"content":{"rendered":"\n<p>Dalam pengembangan aplikasi web modern berbasis React, kemampuan untuk mengelola navigasi antar halaman sangat penting. <\/p>\n\n\n\n<p>Salah satu library yang paling populer dan powerful untuk tugas ini adalah React Router. Artikel ini akan membahas pengertian React Router, manfaatnya, langkah-langkah penggunaan dasar, serta penutup untuk mendorong praktik langsung.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#Pengertian_React_Router\" >Pengertian React Router<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#Manfaat_Routing_di_React_Router\" >Manfaat Routing di React Router<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#1_Navigasi_Dinamis\" >1. Navigasi Dinamis<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#2_URL_Terkelola_dengan_Baik\" >2. URL Terkelola dengan Baik<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#3_Komponen_Modular\" >3. Komponen Modular<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#4_Dukungan_Nested_Route_dan_Parameter\" >4. Dukungan Nested Route dan Parameter<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#5_Integrasi_Mudah_dengan_State_Management\" >5. Integrasi Mudah dengan State Management<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#Cara_Menggunakan_React_Router\" >Cara Menggunakan React Router<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#1_Instalasi_React_Router\" >1. Instalasi React Router<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#2_Setup_Routing_Dasar\" >2. Setup Routing Dasar<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#3_Gunakan_Nested_Routes_Opsional\" >3. Gunakan Nested Routes (Opsional)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#4_Navigasi_Programatik\" >4. Navigasi Programatik<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#Penutup\" >Penutup<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Pengertian_React_Router\"><\/span>Pengertian React Router<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>React Router adalah library standar untuk melakukan routing di aplikasi React. Routing memungkinkan pengguna untuk berpindah antar halaman atau komponen tanpa harus me-refresh halaman secara penuh, menciptakan pengalaman seperti aplikasi native.<\/p>\n\n\n\n<p>React Router mengatur bagaimana URL ditangani dan dikaitkan dengan komponen yang sesuai. Dengan menggunakan pendekatan declarative, pengembang dapat menentukan struktur navigasi aplikasi secara fleksibel.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-text-align-center\"><em><strong>Baca Juga: <a href=\"https:\/\/serkomi.com\/blog\/sertifikasi-web-developer\/\">Sertifikasi Web Developer<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Manfaat_Routing_di_React_Router\"><\/span>Manfaat Routing di React Router<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Simak beberapa manfaat Routing di React Router yang jarang banyak orang ketahui:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Navigasi_Dinamis\"><\/span>1. Navigasi Dinamis<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pengguna dapat berpindah antar halaman atau konten tanpa reload penuh, yang meningkatkan performa dan UX.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_URL_Terkelola_dengan_Baik\"><\/span>2. URL Terkelola dengan Baik<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Routing membantu menciptakan struktur URL yang bersih dan SEO-friendly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Komponen_Modular\"><\/span>3. Komponen Modular<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Setiap halaman atau rute dikaitkan dengan komponen spesifik, memudahkan pemeliharaan kode.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Dukungan_Nested_Route_dan_Parameter\"><\/span>4. Dukungan Nested Route dan Parameter<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>React Router mendukung nested routing, route parameter, dan redirect yang dibutuhkan aplikasi kompleks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Integrasi_Mudah_dengan_State_Management\"><\/span>5. Integrasi Mudah dengan State Management<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Routing bisa dikombinasikan dengan Redux, Context API, atau library lain untuk pengelolaan state global.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cara_Menggunakan_React_Router\"><\/span>Cara Menggunakan React Router<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Simak langkah-langkah dalam menggunakan Routing di React Router, ikuti terus artikel ini sampai akhir:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Instalasi_React_Router\"><\/span>1. Instalasi React Router<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pastikan Anda sudah memiliki project React. Lalu install React Router:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install react-router-dom\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Setup_Routing_Dasar\"><\/span>2. Setup Routing Dasar<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Import dan gunakan komponen routing di <code>App.js<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';\nimport Home from '.\/pages\/Home';\nimport About from '.\/pages\/About';\n\nfunction App() {\n  return (\n    &lt;Router&gt;\n      &lt;nav&gt;\n        &lt;Link to=\"\/\"&gt;Home&lt;\/Link&gt;\n        &lt;Link to=\"\/about\"&gt;About&lt;\/Link&gt;\n      &lt;\/nav&gt;\n      &lt;Routes&gt;\n        &lt;Route path=\"\/\" element={&lt;Home \/&gt;} \/&gt;\n        &lt;Route path=\"\/about\" element={&lt;About \/&gt;} \/&gt;\n      &lt;\/Routes&gt;\n    &lt;\/Router&gt;\n  );\n}\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Gunakan_Nested_Routes_Opsional\"><\/span>3. Gunakan Nested Routes (Opsional)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Anda bisa menambahkan nested route untuk struktur navigasi yang lebih kompleks:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;Route path=\"\/dashboard\" element={&lt;Dashboard \/&gt;}&gt;\n  &lt;Route path=\"stats\" element={&lt;Stats \/&gt;} \/&gt;\n&lt;\/Route&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Navigasi_Programatik\"><\/span>4. Navigasi Programatik<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Gunakan <code>useNavigate()<\/code> untuk berpindah halaman secara programatik:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { useNavigate } from 'react-router-dom';\n\nconst Login = () =&gt; {\n  const navigate = useNavigate();\n  const handleLogin = () =&gt; {\n    \/\/ setelah login berhasil\n    navigate('\/dashboard');\n  };\n  return &lt;button onClick={handleLogin}&gt;Login&lt;\/button&gt;;\n};\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Penutup\"><\/span>Penutup<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>React Router adalah alat penting dalam pengembangan aplikasi React yang membutuhkan navigasi dinamis. <\/p>\n\n\n\n<p>Dengan struktur routing yang jelas dan komponen yang modular, pengembang dapat menciptakan aplikasi web yang cepat, terstruktur, dan mudah dipelihara. <\/p>\n\n\n\n<p>Mulailah dengan routing dasar dan eksplorasi fitur lanjutan seperti nested routes dan dynamic routing untuk membangun aplikasi React yang lebih kompleks dan profesional.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dalam pengembangan aplikasi web modern berbasis React, kemampuan untuk mengelola navigasi antar halaman sangat penting. Salah satu library yang paling populer dan powerful untuk tugas ini adalah React Router. Artikel ini akan membahas pengertian React Router, manfaatnya, langkah-langkah penggunaan dasar, serta penutup untuk mendorong praktik langsung. Pengertian React Router React Router adalah library standar untuk [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":764,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[111],"tags":[308,310,307],"class_list":["post-763","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-developer","tag-cara-routing-di-react","tag-react-router-dom","tag-react-router-tutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial Lengkap Routing di React Router untuk Pemula - serkomi<\/title>\n<meta name=\"description\" content=\"Pelajari cara menggunakan React Router untuk membuat navigasi antar halaman dalam aplikasi React. Cocok untuk pemula dan developer lanjutan!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial Lengkap Routing di React Router untuk Pemula - serkomi\" \/>\n<meta property=\"og:description\" content=\"Pelajari cara menggunakan React Router untuk membuat navigasi antar halaman dalam aplikasi React. Cocok untuk pemula dan developer lanjutan!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/\" \/>\n<meta property=\"og:site_name\" content=\"serkomi\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-25T08:09:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-25T08:09:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-47.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/\",\"url\":\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/\",\"name\":\"Tutorial Lengkap Routing di React Router untuk Pemula - serkomi\",\"isPartOf\":{\"@id\":\"https:\/\/serkomi.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-47.png\",\"datePublished\":\"2025-07-25T08:09:35+00:00\",\"dateModified\":\"2025-07-25T08:09:37+00:00\",\"author\":{\"@id\":\"https:\/\/serkomi.com\/blog\/#\/schema\/person\/89f58e37c2c422c73d102097121e837f\"},\"description\":\"Pelajari cara menggunakan React Router untuk membuat navigasi antar halaman dalam aplikasi React. Cocok untuk pemula dan developer lanjutan!\",\"breadcrumb\":{\"@id\":\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#primaryimage\",\"url\":\"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-47.png\",\"contentUrl\":\"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-47.png\",\"width\":600,\"height\":400,\"caption\":\"Tutorial Lengkap Routing di React Router untuk Pemula\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/serkomi.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial Lengkap Routing di React Router untuk Pemula\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/serkomi.com\/blog\/#website\",\"url\":\"https:\/\/serkomi.com\/blog\/\",\"name\":\"serkomi\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/serkomi.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/serkomi.com\/blog\/#\/schema\/person\/89f58e37c2c422c73d102097121e837f\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/serkomi.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/serkomi.com\"],\"url\":\"https:\/\/serkomi.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial Lengkap Routing di React Router untuk Pemula - serkomi","description":"Pelajari cara menggunakan React Router untuk membuat navigasi antar halaman dalam aplikasi React. Cocok untuk pemula dan developer lanjutan!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/","og_locale":"en_US","og_type":"article","og_title":"Tutorial Lengkap Routing di React Router untuk Pemula - serkomi","og_description":"Pelajari cara menggunakan React Router untuk membuat navigasi antar halaman dalam aplikasi React. Cocok untuk pemula dan developer lanjutan!","og_url":"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/","og_site_name":"serkomi","article_published_time":"2025-07-25T08:09:35+00:00","article_modified_time":"2025-07-25T08:09:37+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-47.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/","url":"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/","name":"Tutorial Lengkap Routing di React Router untuk Pemula - serkomi","isPartOf":{"@id":"https:\/\/serkomi.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#primaryimage"},"image":{"@id":"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#primaryimage"},"thumbnailUrl":"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-47.png","datePublished":"2025-07-25T08:09:35+00:00","dateModified":"2025-07-25T08:09:37+00:00","author":{"@id":"https:\/\/serkomi.com\/blog\/#\/schema\/person\/89f58e37c2c422c73d102097121e837f"},"description":"Pelajari cara menggunakan React Router untuk membuat navigasi antar halaman dalam aplikasi React. Cocok untuk pemula dan developer lanjutan!","breadcrumb":{"@id":"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#primaryimage","url":"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-47.png","contentUrl":"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-47.png","width":600,"height":400,"caption":"Tutorial Lengkap Routing di React Router untuk Pemula"},{"@type":"BreadcrumbList","@id":"https:\/\/serkomi.com\/blog\/tutorial-lengkap-routing-di-react-router-untuk-pemula\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/serkomi.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tutorial Lengkap Routing di React Router untuk Pemula"}]},{"@type":"WebSite","@id":"https:\/\/serkomi.com\/blog\/#website","url":"https:\/\/serkomi.com\/blog\/","name":"serkomi","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/serkomi.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/serkomi.com\/blog\/#\/schema\/person\/89f58e37c2c422c73d102097121e837f","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/serkomi.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/serkomi.com"],"url":"https:\/\/serkomi.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/posts\/763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/comments?post=763"}],"version-history":[{"count":1,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/posts\/763\/revisions"}],"predecessor-version":[{"id":765,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/posts\/763\/revisions\/765"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/media\/764"}],"wp:attachment":[{"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/media?parent=763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/categories?post=763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/tags?post=763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}