DEV Community

_Khojiakbar_
_Khojiakbar_

Posted on

3 1 1 1 1

Layout with React Router v6

Step 1: Setup React Router v6

npm i -D react-router-dom@latest
Enter fullscreen mode Exit fullscreen mode

Step 2: Define Route Structure

Next, define the structure of your routes in the App.js file. We'll create routes for the home, about, and contact pages, and associate them with corresponding components.

// App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Layout from './Layout';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Step 3: Create Layout Component

Now, let’s create a layout component (Layout.js) that will contain our shared header and main content area.

// Layout.js
import React from 'react';
import { Outlet } from 'react-router-dom';

function Layout() {
  return (
    <div>
      <header>
        <h1>My App</h1>
        <nav>
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
          </ul>
        </nav>
      </header>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

export default Layout;
Enter fullscreen mode Exit fullscreen mode

Step 4: Create Page Components

Create separate components for the home, about, and contact pages. These components will represent the content of each page.

Home Component

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

function Home() {
  return (
    <div>
      <h2>Home Page</h2>
      <p>Welcome to the home page!</p>
    </div>
  );
}

export default Home;
Enter fullscreen mode Exit fullscreen mode

About Component

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

function About() {
  return (
    <div>
      <h2>About Page</h2>
      <p>Learn more about us!</p>
    </div>
  );
}

export default About;
Enter fullscreen mode Exit fullscreen mode

Contact Component

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

function Contact() {
  return (
    <div>
      <h2>Contact Page</h2>
      <p>Reach out to us!</p>
    </div>
  );
}

export default Contact;
Enter fullscreen mode Exit fullscreen mode

Conclusion

Congratulations! You’ve successfully built a layout using React Router v6, allowing you to navigate between different pages while maintaining a consistent layout across the application. This approach provides a clean and organized structure for your React applications with multiple routes. Experiment with adding more routes and components to further enhance your application!

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay