Magic of React Router DOM

Are you looking to create a smooth navigation experience in your React application? Look no further than React Router Dom, a fantastic library that simplifies routing and navigation. In this Blog, we'll walk you through the process of setting up a clean and efficient navigation system.

React Router Dom is actually a separate library, not built directly into React itself. It's like an add-on that helps make navigation between different pages in a React application easier.

In contrast, Next.js, another framework for building React applications, includes built-in routing capabilities. That means, in Next.js, you don't need to install any additional third-party libraries for navigation—it's all there, ready to use right out of the box.

Installation

Create a new React app by running this command:
```
 npm create vite@latest
```
If you'd like to check the code simultaneously, you can find the GitHub repository for it. Feel free to clone it and install the dependencies using npm install.

Then install React Router Dom through this command

npm install react-router-dom

After that, create a components folder inside your src directory to keep your code organized and reusable
Open your App.jsx file and update it as follows (create all components in a suitable directory as mentioned in the code, such as in the Components folder for Home, About, etc.)
If your design doesn't look good, you can remove the content from all CSS files that came with the project initialization. However, if you are cloning my repository, feel free to update the design as needed

import React from "react";
import { Route, Routes } from "react-router-dom";
import Navbar from "./components/navbar";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";
import Blog from "./components/Blog";
import Footer from "./components/Footer";

function App() {
  return (
    <div className="app-container">
      <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/blog" element={<Blog />} />
        </Routes>
      <Footer />
    </div>
  );
}

export default App;

In the code, as you can see, I've added all the routes inside the Routes component and each route has its path specifying which component will be shown for that path

To ensure proper functionality, wrap your entire code with <BrowserRouter> inside your main.jsx , if you do not want to go to the separate file you can also add it here

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

Here is how this looks - VideoLink

In this video, you are observing that only the middle content (Home, About, Blog, Contact) of the web page changes when clicking on the navigation links. The Navbar and Footer remain in the same place, showcasing the magic of React Router DOM.

I believe you now have a good understanding of how React Router DOM works. Thank you for staying tuned until the end.
Happy coding! 🎉
Don't forget to follow Saurav Pant for more blogs like this.

Magic of React Router DOM

Effortless Navigation with React Router DOM: A Simple Example

Installation