Hey buddy! If you’re learning React and thinking — “How do I go from one page to another without reloading the whole app?” — then relax, you’re exactly where you need to be. I was in your shoes once. At first, it felt like: “Wait, everything is on one page? How do I make it feel like a real website?” Then I discovered React Router DOM, and boom — everything clicked.
Today, I’m going to explain React Router DOM like I’m teaching my younger brother — super simple, super clear, with real examples. No boring theory. Just code, results, and that “Aha!” moment. Let’s dive in!
<hr>
<h2>First: What Is React Router DOM? (In Plain English)</h2>
Think of your React app as a magic notebook.
<ul>
<li>You flip a page → new content appears</li>
<li>But it’s still the same notebook (no reload!)</li>
<li>The URL changes → but the app doesn’t refresh</li>
</ul>
That’s exactly what React Router DOM does.
<table>
<thead>
<tr>
<th>Real-Life Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>Open Netflix → Click “TV Shows” → URL becomes <code>/tv-shows</code> → Content changes → No full reload</td>
</tr>
<tr>
<td>That smooth switch? Powered by React Router!</td>
</tr>
</tbody>
</table>
React Router DOM = The GPS for your React app. 
It decides: “Which component should show up when the URL is X?”
<hr>
<h2>Step 1: Install It (One Command)</h2>
Open your terminal and type:
<pre><code class="language-bash">npm install react-router-dom
</code></pre>
Or if you use Yarn:
<pre><code class="language-bash">yarn add react-router-dom
</code></pre>
Done! The library is now in your project.
<hr>
<h2>Step 2: Setup in Your App (index.js)</h2>
Open <code>index.js</code> (or <code>main.jsx</code>) and wrap your app with <code>BrowserRouter</code>:
<pre><code class="language-jsx">import React from &#x27;react&#x27;;
import ReactDOM from &#x27;react-dom/client&#x27;;
import { BrowserRouter } from &#x27;react-router-dom&#x27;;
import App from &#x27;./App&#x27;;

ReactDOM.createRoot(document.getElementById(&#x27;root&#x27;)).render(
 &lt;BrowserRouter&gt;
 &lt;App /&gt;
 &lt;/BrowserRouter&gt;
);
</code></pre>
What’s happening? 
<code>&lt;BrowserRouter&gt;</code> is like a big bubble around your app. It watches the URL and says:
<blockquote>
“Okay, URL changed — time to show a new component!”
</blockquote>
<blockquote>
Pro Tip: Use <code>BrowserRouter</code> for normal apps. Use <code>HashRouter</code> only if deploying to GitHub Pages.
</blockquote>
<hr>
<h2>Step 3: Create Routes (App.js)</h2>
Now open <code>App.js</code> and set up your routes:
<pre><code class="language-jsx">import { Routes, Route } from &#x27;react-router-dom&#x27;;
import Home from &#x27;./components/Home&#x27;;
import About from &#x27;./components/About&#x27;;
import Contact from &#x27;./components/Contact&#x27;;
import Navbar from &#x27;./components/Navbar&#x27;;

function App() {
 return (
 &lt;div&gt;
 &lt;Navbar /&gt;
 &lt;div style={{ padding: &#x27;2rem&#x27; }}&gt;
 &lt;h1 style={{ textAlign: &#x27;center&#x27;, color: &#x27;#333&#x27; }}&gt;
 🚀 My Awesome React App
 &lt;/h1&gt;

 &lt;Routes&gt;
 &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
 &lt;Route path=&quot;/about&quot; element={&lt;About /&gt;} /&gt;
 &lt;Route path=&quot;/contact&quot; element={&lt;Contact /&gt;} /&gt;
 &lt;/Routes&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 );
}

export default App;
</code></pre>
<h3>Now Create Simple Components</h3>
Home.js
<pre><code class="language-jsx">function Home() {
 return &lt;h2&gt;🏠 Welcome to the Home Page! Feels like home, right?&lt;/h2&gt;;
}
export default Home;
</code></pre>
About.js
<pre><code class="language-jsx">function About() {
 return &lt;h2&gt;📖 About Me: I&#x27;m a React developer teaching you the cool stuff!&lt;/h2&gt;;
}
export default About;
</code></pre>
Contact.js
<pre><code class="language-jsx">function Contact() {
 return &lt;h2&gt;📞 Call me (fake number): 999-888-7777 😄&lt;/h2&gt;;
}
export default Contact;
</code></pre>
Now run your app:
<ul>
<li><code>localhost:3000</code> → Home</li>
<li><code>localhost:3000/about</code> → About</li>
<li><code>localhost:3000/contact</code> → Contact</li>
</ul>
No page reload. Just smooth switching. 
That’s the magic of React Router DOM!
<hr>
<h2>Step 4: Build a Navigation Menu (Using <code>&lt;Link&gt;</code>)</h2>
Forget <code>&lt;a href=&quot;&quot;&gt;</code> — that reloads the page! 
We use <code>&lt;Link&gt;</code> instead.
Create Navbar.js:
<pre><code class="language-jsx">import { Link } from &#x27;react-router-dom&#x27;;

function Navbar() {
 return (
 &lt;nav style={{
 background: &#x27;#222&#x27;,
 padding: &#x27;1rem&#x27;,
 borderRadius: &#x27;10px&#x27;,
 margin: &#x27;1rem&#x27;
 }}&gt;
 &lt;ul style={{
 display: &#x27;flex&#x27;,
 justifyContent: &#x27;center&#x27;,
 gap: &#x27;2rem&#x27;,
 listStyle: &#x27;none&#x27;,
 margin: 0,
 padding: 0
 }}&gt;
 &lt;li&gt;&lt;Link to=&quot;/&quot; style={linkStyle}&gt;Home&lt;/Link&gt;&lt;/li&gt;
 &lt;li&gt;&lt;Link to=&quot;/about&quot; style={linkStyle}&gt;About&lt;/Link&gt;&lt;/li&gt;
 &lt;li&gt;&lt;Link to=&quot;/contact&quot; style={linkStyle}&gt;Contact&lt;/Link&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/nav&gt;
 );
}

const linkStyle = {
 color: &#x27;white&#x27;,
 textDecoration: &#x27;none&#x27;,
 fontWeight: &#x27;bold&#x27;,
 fontSize: &#x27;1.1rem&#x27;,
 padding: &#x27;0.5rem 1rem&#x27;,
 borderRadius: &#x27;5px&#x27;,
 transition: &#x27;0.3s&#x27;
};

export default Navbar;
</code></pre>
Now click the links — 
URL changes → Component changes → No refresh! 
Feels like a real website, right?
<hr>
<h2>Bonus: Add a 404 “Page Not Found”</h2>
What if someone types a wrong URL like <code>/pizza</code>?
Let’s catch it!
NotFound.js
<pre><code class="language-jsx">import { Link } from &#x27;react-router-dom&#x27;;

function NotFound() {
 return (
 &lt;div style={{ textAlign: &#x27;center&#x27;, marginTop: &#x27;50px&#x27; }}&gt;
 &lt;h1 style={{ fontSize: &#x27;5rem&#x27;, color: &#x27;#e74c3c&#x27; }}&gt;404&lt;/h1&gt;
 &lt;h2&gt;Oops! This page doesn&#x27;t exist 😅&lt;/h2&gt;
 &lt;p&gt;Lost? Let&#x27;s go back home.&lt;/p&gt;
 &lt;Link to=&quot;/&quot; style={{
 background: &#x27;#3498db&#x27;,
 color: &#x27;white&#x27;,
 padding: &#x27;10px 20px&#x27;,
 borderRadius: &#x27;5px&#x27;,
 textDecoration: &#x27;none&#x27;
 }}&gt;
 🏠 Back to Home
 &lt;/Link&gt;
 &lt;/div&gt;
 );
}

export default NotFound;
</code></pre>
Now add it to <code>App.js</code> at the end of <code>&lt;Routes&gt;</code>:
<pre><code class="language-jsx">&lt;Route path=&quot;*&quot; element={&lt;NotFound /&gt;} /&gt;
</code></pre>
The <code>*</code> means: “Any URL that doesn’t match above” → show 404.
Try going to <code>localhost:3000/random-page</code> → You’ll see your custom 404!
<hr>
<h2>Want to See It in Action? Watch My Video!</h2>
If you learn better by watching + coding along, I made a full video on this exact topic — with live coding, explanations, and even debugging tips.
👉 Watch the full video here: <a href="https://youtu.be/h7XqQXelltI?si=Blkg9ZP5_p_3nFTR" target="_blank" rel="noopener nofollow">Code Ki Pathshala YouTube Channel</a> 
(Lecture 9 – React Router DOM Explained)
It’s part of my React JS Course (2025) — perfect for beginners!
<hr>
<h2>Final Words: Now It’s Your Turn!</h2>
You just learned:
<ul>
<li>What React Router DOM is</li>
<li>How to install &amp; setup</li>
<li>How to create routes</li>
<li>How to navigate with <code>&lt;Link&gt;</code></li>
<li>Even how to handle 404 pages!</li>
</ul>
Now stop reading. Start coding.
Open your editor. Build a small app with 4–5 pages. Break it. Fix it. That’s how you really learn.
And if you want to go deeper (nested routes, dynamic URLs, protected routes), follow my playlist: 
“Black Magic of React” — where I teach the real tricks no one talks about.
You’ve got this! 
Keep coding. Keep failing. Keep growing. 
See you in the next one! 🚀
— Your friend in code

React Router DOM Tutorial for Beginners: Master Navigation in React JS (2025)