{"id":2917,"date":"2025-07-29T08:14:26","date_gmt":"2025-07-29T08:14:26","guid":{"rendered":"https:\/\/digidesain.com\/blog\/?p=2917"},"modified":"2025-07-29T08:14:26","modified_gmt":"2025-07-29T08:14:26","slug":"tutorial-routing-di-react-router","status":"publish","type":"post","link":"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/","title":{"rendered":"Tutorial Routing di React Router"},"content":{"rendered":"\n<p>Tutorial Routing di React Router, Saat membangun aplikasi web menggunakan React, salah satu hal yang wajib kamu kuasai adalah routing. <\/p>\n\n\n\n<p>Routing memungkinkan aplikasi menavigasi antar halaman tanpa perlu me-refresh browser, sehingga menciptakan pengalaman pengguna yang lebih mulus dan modern.<\/p>\n\n\n\n<p>Nah, dalam artikel ini, kita akan membahas lengkap tentang tutorial routing di React Router. Mulai dari konsep dasarnya, instalasi, hingga implementasi routing yang kompleks. <\/p>\n\n\n\n<p>Jangan khawatir, pembahasannya kita buat senyaman mungkin, cocok untuk pemula maupun yang ingin memperdalam pemahaman tentang React Router.<\/p>\n\n\n\n<p><a href=\"https:\/\/digidesain.com\/blog\/sertifikasi-web-developer\/\">Sertifikasi Web Developer <\/a>bukan hanya sekadar dokumen, tapi juga pengakuan atas kemampuanmu dalam menulis kode, membangun UI\/UX, dan memahami arsitektur web<\/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:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#Apa_Itu_React_Router\" >Apa Itu 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:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#Instalasi_dan_Setup_Awal\" >Instalasi dan Setup Awal<\/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:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#Instalasi_React_Router\" >Instalasi React Router<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#Membuat_Routing_Dasar\" >Membuat Routing Dasar<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#1_Menyusun_Struktur_Halaman\" >1. Menyusun Struktur Halaman<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#Konfigurasi_Routing_di_Appjs\" >Konfigurasi Routing di App.js<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#Navigasi_Dinamis_dan_Parameter_Routing\" >Navigasi Dinamis dan Parameter Routing<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#1_Menggunakan_Route_Parameters\" >1. Menggunakan Route Parameters<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#Navigasi_Programatik_dengan_useNavigate\" >Navigasi Programatik dengan useNavigate<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#1_Implementasi_useNavigate\" >1. Implementasi useNavigate<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#Nested_Routing_dan_Layout\" >Nested Routing dan Layout<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#Contoh_Nested_Route\" >Contoh Nested Route<\/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:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#Kesimpulan\" >Kesimpulan<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Apa_Itu_React_Router\"><\/span><strong>Apa Itu React Router?<\/strong><strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>React Router adalah pustaka (library) resmi untuk menangani navigasi di aplikasi React. Dengan React Router, kamu bisa membuat berbagai halaman (routes) dalam satu aplikasi single-page tanpa reload halaman. Ini membuat transisi antar halaman terasa instan.<\/p>\n\n\n\n<p>Dalam tutorial routing di React Router ini, kita akan fokus pada versi terbaru dari React Router (v6), yang membawa beberapa perubahan besar dari versi sebelumnya.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Instalasi_dan_Setup_Awal\"><\/span><strong>Instalasi dan Setup Awal<\/strong><strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Sebelum masuk ke praktik, pastikan kamu sudah memiliki project React. Kalau belum, kamu bisa membuatnya dengan create-react-app:<\/p>\n\n\n\n<p>npx create-react-app my-app<\/p>\n\n\n\n<p>cd my-app<\/p>\n\n\n\n<p>Setelah itu, kita bisa mulai setup React Router.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Instalasi_React_Router\"><\/span><strong>Instalasi React Router<\/strong><strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Untuk mulai menggunakan routing, kamu harus menginstal paket React Router terlebih dahulu. Berikut perintah instalasinya:<\/p>\n\n\n\n<p>npm install react-router-dom<\/p>\n\n\n\n<p>Setelah berhasil diinstal, kamu bisa mulai mengatur routing di dalam project React kamu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Membuat_Routing_Dasar\"><\/span><strong>Membuat Routing Dasar<\/strong><strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Setelah setup awal selesai, langkah berikutnya dalam tutorial routing di React Router adalah membuat routing sederhana. Misalnya, kita ingin memiliki tiga halaman: Home, About, dan Contact.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Menyusun_Struktur_Halaman\"><\/span>1. <strong>Menyusun Struktur Halaman<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Buat file komponen seperti berikut:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Home.js<\/li>\n\n\n\n<li>About.js<\/li>\n\n\n\n<li>Contact.js<\/li>\n<\/ul>\n\n\n\n<p>Isi contoh komponen:<\/p>\n\n\n\n<p>\/\/ Home.js<\/p>\n\n\n\n<p>function Home() {<\/p>\n\n\n\n<p>&nbsp;&nbsp;return &lt;h2&gt;Halaman Home&lt;\/h2&gt;;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>export default Home;<\/p>\n\n\n\n<p>Lakukan hal yang sama untuk About dan Contact. Setelah itu, kita buat routing-nya.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Konfigurasi_Routing_di_Appjs\"><\/span><strong>Konfigurasi Routing di App.js<\/strong><strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Berikut contoh setup routing di file App.js:<\/p>\n\n\n\n<p>import { BrowserRouter as Router, Routes, Route, Link } from &#8216;react-router-dom&#8217;;<\/p>\n\n\n\n<p>import Home from &#8216;.\/Home&#8217;;<\/p>\n\n\n\n<p>import About from &#8216;.\/About&#8217;;<\/p>\n\n\n\n<p>import Contact from &#8216;.\/Contact&#8217;;<\/p>\n\n\n\n<p>function App() {<\/p>\n\n\n\n<p>&nbsp;&nbsp;return (<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;Router&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;nav&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Link to=&#8221;\/&#8221;&gt;Home&lt;\/Link&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Link to=&#8221;\/about&#8221;&gt;About&lt;\/Link&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Link to=&#8221;\/contact&#8221;&gt;Contact&lt;\/Link&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/nav&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Routes&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Route path=&#8221;\/&#8221; element={&lt;Home \/&gt;} \/&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Route path=&#8221;\/about&#8221; element={&lt;About \/&gt;} \/&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Route path=&#8221;\/contact&#8221; element={&lt;Contact \/&gt;} \/&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/Routes&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/Router&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;);<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>export default App;<\/p>\n\n\n\n<p>Dengan struktur di atas, kamu sudah memiliki sistem routing dasar di React. Ini adalah pondasi dari <strong>tutorial routing di React Router<\/strong>&nbsp;yang akan terus kita kembangkan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Navigasi_Dinamis_dan_Parameter_Routing\"><\/span><strong>Navigasi Dinamis dan Parameter Routing<\/strong><strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Routing di React Router tak hanya untuk halaman statis. Kita juga bisa membuat navigasi dinamis berdasarkan parameter. Ini berguna untuk membuat halaman detail seperti profil pengguna atau produk.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Menggunakan_Route_Parameters\"><\/span>1. <strong>Menggunakan Route Parameters<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Misalnya, kamu ingin membuat halaman profil pengguna berdasarkan ID. Kamu bisa menambahkan routing seperti ini:<\/p>\n\n\n\n<p>&lt;Route path=&#8221;\/user\/:id&#8221; element={&lt;UserProfile \/&gt;} \/&gt;<\/p>\n\n\n\n<p>Di dalam komponen UserProfile, kamu bisa mengambil ID dari URL menggunakan hook useParams:<\/p>\n\n\n\n<p>import { useParams } from &#8216;react-router-dom&#8217;;<\/p>\n\n\n\n<p>function UserProfile() {<\/p>\n\n\n\n<p>&nbsp;&nbsp;const { id } = useParams();<\/p>\n\n\n\n<p>&nbsp;&nbsp;return &lt;h2&gt;Profil pengguna dengan ID: {id}&lt;\/h2&gt;;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>Dengan begitu, kamu bisa mengakses data berdasarkan ID yang ada di URL. Ini adalah fitur powerful dari React Router yang wajib kamu kuasai dalam <strong>tutorial routing di React Router<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Navigasi_Programatik_dengan_useNavigate\"><\/span><strong>Navigasi Programatik dengan useNavigate<\/strong><strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Selain menggunakan link, kita juga bisa mengarahkan user ke halaman lain melalui event, seperti setelah login atau klik tombol. Untuk itu, kita pakai hook useNavigate.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Implementasi_useNavigate\"><\/span>1. <strong>Implementasi useNavigate<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Contoh penggunaannya:<\/p>\n\n\n\n<p>import { useNavigate } from &#8216;react-router-dom&#8217;;<\/p>\n\n\n\n<p>function LoginButton() {<\/p>\n\n\n\n<p>&nbsp;&nbsp;const navigate = useNavigate();<\/p>\n\n\n\n<p>&nbsp;&nbsp;const handleLogin = () =&gt; {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;\/\/ proses login<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;navigate(&#8216;\/dashboard&#8217;);<\/p>\n\n\n\n<p>&nbsp;&nbsp;};<\/p>\n\n\n\n<p>&nbsp;&nbsp;return &lt;button onClick={handleLogin}&gt;Login&lt;\/button&gt;;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>Dengan begitu, kamu bisa mengontrol arah navigasi sesuai logika aplikasi. Ini sangat penting dalam membangun alur pengguna yang lebih kompleks.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Nested_Routing_dan_Layout\"><\/span><strong>Nested Routing dan Layout<\/strong><strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Aplikasi besar biasanya punya layout yang sama di banyak halaman, seperti sidebar atau header. React Router mendukung nested routing, yang memudahkan kita menyusun halaman bersarang.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Contoh_Nested_Route\"><\/span><strong>Contoh Nested Route<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Misalnya, kamu ingin membuat halaman dashboard dengan beberapa sub-halaman:<\/p>\n\n\n\n<p>&lt;Route path=&#8221;\/dashboard&#8221; element={&lt;DashboardLayout \/&gt;}&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&lt;Route path=&#8221;profile&#8221; element={&lt;Profile \/&gt;} \/&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&lt;Route path=&#8221;settings&#8221; element={&lt;Settings \/&gt;} \/&gt;<\/p>\n\n\n\n<p>&lt;\/Route&gt;<\/p>\n\n\n\n<p>Di DashboardLayout, kamu harus menyertakan &lt;Outlet \/&gt;&nbsp;untuk menampilkan sub-halaman:<\/p>\n\n\n\n<p>import { Outlet } from &#8216;react-router-dom&#8217;;<\/p>\n\n\n\n<p>function DashboardLayout() {<\/p>\n\n\n\n<p>&nbsp;&nbsp;return (<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;Dashboard&lt;\/h2&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Outlet \/&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;);<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>Ini menjadikan struktur aplikasi lebih modular dan mudah diatur, terutama saat skala aplikasi tumbuh.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Kesimpulan\"><\/span><strong>Kesimpulan<\/strong><strong><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Dalam membangun aplikasi modern, memahami <strong>tutorial routing di React Router<\/strong>&nbsp;adalah hal yang sangat penting. Routing bukan hanya soal navigasi, tapi juga bagian dari pengalaman pengguna, struktur aplikasi, dan performa.<\/p>\n\n\n\n<p>Dengan memahami konsep dasar seperti routing statis, parameter dinamis, programatik, dan nested route, kamu bisa membangun aplikasi yang kompleks dengan navigasi yang rapi. Jangan lupa untuk selalu mengikuti update dari React Router karena library ini terus berkembang.<\/p>\n\n\n\n<p>Semoga panduan ini membantumu memahami dan menerapkan routing di aplikasi React dengan lebih percaya diri. Selamat mencoba dan terus eksplorasi kemampuan React-mu!<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tutorial Routing di React Router, Saat membangun aplikasi web menggunakan React, salah satu hal yang wajib kamu kuasai adalah routing. Routing memungkinkan aplikasi menavigasi antar halaman tanpa perlu me-refresh browser, sehingga menciptakan pengalaman pengguna yang lebih mulus dan modern. Nah, dalam artikel ini, kita akan membahas lengkap tentang tutorial routing di React Router. Mulai dari [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2918,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","inline_featured_image":false,"footnotes":""},"categories":[35],"tags":[140],"class_list":["post-2917","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-developer","tag-routing"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial Routing di React Router - digidesain<\/title>\n<meta name=\"description\" content=\"Dalam membangun aplikasi modern, memahami tutorial routing di React Router\u00a0adalah hal yang sangat penting. Routing bukan hanya soal navigasi, tapi juga bagian dari pengalaman pengguna, struktur aplikasi, dan performa.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial Routing di React Router - digidesain\" \/>\n<meta property=\"og:description\" content=\"Dalam membangun aplikasi modern, memahami tutorial routing di React Router\u00a0adalah hal yang sangat penting. Routing bukan hanya soal navigasi, tapi juga bagian dari pengalaman pengguna, struktur aplikasi, dan performa.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/\" \/>\n<meta property=\"og:site_name\" content=\"digidesain\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-29T08:14:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-7-1.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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/digidesain.com\/blog\/#\/schema\/person\/d280cd31dcb72556d28bb5e5d800edc7\"},\"headline\":\"Tutorial Routing di React Router\",\"datePublished\":\"2025-07-29T08:14:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/\"},\"wordCount\":1004,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/digidesain.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-7-1.png\",\"keywords\":[\"Routing\"],\"articleSection\":[\"Web Developer\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/\",\"url\":\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/\",\"name\":\"Tutorial Routing di React Router - digidesain\",\"isPartOf\":{\"@id\":\"https:\/\/digidesain.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-7-1.png\",\"datePublished\":\"2025-07-29T08:14:26+00:00\",\"description\":\"Dalam membangun aplikasi modern, memahami tutorial routing di React Router\u00a0adalah hal yang sangat penting. Routing bukan hanya soal navigasi, tapi juga bagian dari pengalaman pengguna, struktur aplikasi, dan performa.\",\"breadcrumb\":{\"@id\":\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#primaryimage\",\"url\":\"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-7-1.png\",\"contentUrl\":\"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-7-1.png\",\"width\":600,\"height\":400,\"caption\":\"Tutorial Routing di React Router\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/digidesain.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial Routing di React Router\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/digidesain.com\/blog\/#website\",\"url\":\"https:\/\/digidesain.com\/blog\/\",\"name\":\"digidesain\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/digidesain.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/digidesain.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/digidesain.com\/blog\/#organization\",\"name\":\"digidesain\",\"url\":\"https:\/\/digidesain.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/digidesain.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/06\/cropped-Logo_Kompetitor_Ditekindo_Transparan-29-removebg-preview.png\",\"contentUrl\":\"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/06\/cropped-Logo_Kompetitor_Ditekindo_Transparan-29-removebg-preview.png\",\"width\":821,\"height\":304,\"caption\":\"digidesain\"},\"image\":{\"@id\":\"https:\/\/digidesain.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/digidesain.com\/blog\/#\/schema\/person\/d280cd31dcb72556d28bb5e5d800edc7\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/digidesain.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:\/\/digidesain.com\"],\"url\":\"https:\/\/digidesain.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial Routing di React Router - digidesain","description":"Dalam membangun aplikasi modern, memahami tutorial routing di React Router\u00a0adalah hal yang sangat penting. Routing bukan hanya soal navigasi, tapi juga bagian dari pengalaman pengguna, struktur aplikasi, dan performa.","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:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/","og_locale":"en_US","og_type":"article","og_title":"Tutorial Routing di React Router - digidesain","og_description":"Dalam membangun aplikasi modern, memahami tutorial routing di React Router\u00a0adalah hal yang sangat penting. Routing bukan hanya soal navigasi, tapi juga bagian dari pengalaman pengguna, struktur aplikasi, dan performa.","og_url":"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/","og_site_name":"digidesain","article_published_time":"2025-07-29T08:14:26+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-7-1.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#article","isPartOf":{"@id":"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/"},"author":{"name":"admin","@id":"https:\/\/digidesain.com\/blog\/#\/schema\/person\/d280cd31dcb72556d28bb5e5d800edc7"},"headline":"Tutorial Routing di React Router","datePublished":"2025-07-29T08:14:26+00:00","mainEntityOfPage":{"@id":"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/"},"wordCount":1004,"commentCount":0,"publisher":{"@id":"https:\/\/digidesain.com\/blog\/#organization"},"image":{"@id":"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#primaryimage"},"thumbnailUrl":"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-7-1.png","keywords":["Routing"],"articleSection":["Web Developer"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/","url":"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/","name":"Tutorial Routing di React Router - digidesain","isPartOf":{"@id":"https:\/\/digidesain.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#primaryimage"},"image":{"@id":"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#primaryimage"},"thumbnailUrl":"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-7-1.png","datePublished":"2025-07-29T08:14:26+00:00","description":"Dalam membangun aplikasi modern, memahami tutorial routing di React Router\u00a0adalah hal yang sangat penting. Routing bukan hanya soal navigasi, tapi juga bagian dari pengalaman pengguna, struktur aplikasi, dan performa.","breadcrumb":{"@id":"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#primaryimage","url":"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-7-1.png","contentUrl":"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/07\/Tambahkan-judul-7-1.png","width":600,"height":400,"caption":"Tutorial Routing di React Router"},{"@type":"BreadcrumbList","@id":"https:\/\/digidesain.com\/blog\/tutorial-routing-di-react-router\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/digidesain.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tutorial Routing di React Router"}]},{"@type":"WebSite","@id":"https:\/\/digidesain.com\/blog\/#website","url":"https:\/\/digidesain.com\/blog\/","name":"digidesain","description":"","publisher":{"@id":"https:\/\/digidesain.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/digidesain.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/digidesain.com\/blog\/#organization","name":"digidesain","url":"https:\/\/digidesain.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/digidesain.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/06\/cropped-Logo_Kompetitor_Ditekindo_Transparan-29-removebg-preview.png","contentUrl":"https:\/\/digidesain.com\/blog\/wp-content\/uploads\/2025\/06\/cropped-Logo_Kompetitor_Ditekindo_Transparan-29-removebg-preview.png","width":821,"height":304,"caption":"digidesain"},"image":{"@id":"https:\/\/digidesain.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/digidesain.com\/blog\/#\/schema\/person\/d280cd31dcb72556d28bb5e5d800edc7","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/digidesain.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:\/\/digidesain.com"],"url":"https:\/\/digidesain.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/posts\/2917","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/comments?post=2917"}],"version-history":[{"count":1,"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/posts\/2917\/revisions"}],"predecessor-version":[{"id":2919,"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/posts\/2917\/revisions\/2919"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/media\/2918"}],"wp:attachment":[{"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/media?parent=2917"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/categories?post=2917"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digidesain.com\/blog\/wp-json\/wp\/v2\/tags?post=2917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}