Setting Up Multiple Pages with React Router DOM v6

Setting Up Multiple Pages with React Router DOM v6

Hello there! 👋 Welcome to another exciting coding journey where we dive into the world of React Router DOM v6. If you’re building a React application and want to create a seamless experience with multiple pages, you’ve come to the right place. Today, we’ll explore how to set up multiple pages using React Router DOM, making your app dynamic and user-friendly. Ready? Let’s go!

Why Use React Router DOM?

Before we dive into the setup, let’s clarify why we need React Router DOM in the first place. In a single-page application (SPA) like those built with React, you technically only have one HTML page. However, with the help of React Router DOM, we can simulate multiple “pages,” allowing users to navigate through different views in your application efficiently.

Installing React Router DOM

Before we start coding, you need to have a React app up and running. If you haven’t created one yet, you can easily set one up using Create React App. Open your terminal and run:

bash
npx create-react-app my-awesome-app

Once that’s done, navigate into your project’s directory:

bash
cd my-awesome-app

Now, let’s install React Router DOM. Run the following command:

bash
npm install react-router-dom@6

Great! You’re now ready to start creating multiple pages with React Router DOM.

Setting Up Basic Routing

The core component of React Router DOM is the Router. Let’s start by setting it up in our application. We will also need Routes and Route to define different pathways.

Step 1: Wrap Your App with BrowserRouter

Open your src/index.js and wrap your root component with BrowserRouter. It would look like this:

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

ReactDOM.render(
  
    
      
    
  ,
  document.getElementById('root')
);

Step 2: Create Your Pages

Let’s create a simple setup with three pages: Home, About, and Contact. In your src folder, create a folder named pages and add the following files: Home.js, About.js, and Contact.js.

We’ll have very simple components for now:

jsx
// Home.js
import React from 'react';

function Home() {
  return 
Home Page
;
}

export default Home;

jsx
// About.js
import React from 'react';

function About() {
  return 
About Page
;
}

export default About;

jsx
// Contact.js
import React from 'react';

function Contact() {
  return 
Contact Page
;
}

export default Contact;

Step 3: Setup Routes in App Component

Now, let’s configure the routes in the App component. Open src/App.js and modify it:

jsx
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

function App() {
  return (
    

      
        } />
        } />
        } />
      
    

  );
}

export default App;

Step 4: Add Navigation

Let’s add some navigation links so users can move between pages. We’ll use the Link component from React Router DOM.

Modify your App.js to include navigation:

jsx
import React from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

function App() {
  return (
    

      
      
        } />
        } />
        } />
      
    

  );
}

export default App;

And voila! You now have a basic React app with multiple pages.

Wrap-Up & Practice Ideas

Congratulations! 🎉 You’ve successfully set up a multi-page application using React Router DOM v6. Let’s briefly summarize what we’ve covered:

– Installed React Router DOM to help manage “pages” in single-page applications.
– Set up basic routing using BrowserRouter, Routes, and Route.
– Created multiple components representing different pages.
– Added navigation links using the Link component to move between pages.

Optional Practice Ideas

To further enhance your skills, why not try these ideas?

– Add more pages, such as a Services page or a Blog.
– Implement nested routes for sections within pages.
– Style your navigation bar to make it more appealing.
– Try implementing route protection with authentication.

Feel free to explore and experiment. With each step, you’ll become more comfortable and proficient in using React Router DOM. Happy coding! 😊

—

If you’re looking for more tutorials or have any questions, feel free to reach out in the comments section below or explore more on sagarkunwar.com.np. Keep building and always #KeepCoding!