CODEWITHSUNDEEP
reactjslayoutreact-router-dom
Sefi R
Sefi R

Reputation: 110

Layout Route does not work as expected with react-router-dom@6

I am working with [email protected]. When trying to wrap my elements with "DefaultLayout" element manually everything seems to be OK:

<Route path="/privacy" element={<PageLayout><Privacy /></PageLayout>} />
<Route path="/tos" element={<PageLayout><Tos /></PageLayout>} />

However, when trying to use:

<Route element={<PageLayout />}>
    <Route path="/privacy" element={<Privacy />} />
    <Route path="/tos" element={<Tos />} />
</Route>

I only get the header and the footer without the "children" elements. What might be the reason?

Upvotes: 2

Views: 1880

Answers (2)

Sefi R
Sefi R

Reputation: 110

OK. Problem solved. The Layout page should render <Outlet /> element for this to work. This is how it looks like:

** DefaultLayout **

import React from "react";
import { Header } from "./partials/Header";
import { Footer } from "./partials/Footer";
import { Outlet } from "react-router-dom";

export const DefaultLayout = () => {
  return (
    <div className="default-layout">
      <header className="header">
        <Header />
      </header>
      <main className="main">
        <Outlet />
      </main>
      <footer className="footer">
        <Footer />
      </footer>
    </div>
  );
};

** app.js **

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { DefaultLayout } from "./components/layout/DefaultLayout";
import { AddTicket } from "./pages/add-ticket/AddTicket";
import { Dashboard } from "./pages/dashboard/Dashboard";
import { Entry } from "./pages/entry/Entry";
import { TicketList } from "./pages/ticket-list/TicketList";
import { Ticket } from "./pages/ticket/Ticket";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Entry />} />
        <Route element={<DefaultLayout />}>
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/tickets" element={<TicketList />} />
          <Route path="/ticket" element={<Ticket />} />
          <Route path="/add-ticket" element={<AddTicket />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

Upvotes: 4

MarioG8
MarioG8

Reputation: 5921

Try wrap your code with <Routes> like that:

<Routes>
  <Route element={<PageLayout />}>
  <Route path="/privacy" element={<Privacy />} />
  <Route path="/tos" element={<Tos />} />
  </Route>
</Routes>

index.js here You have example from docs how to use react-router-dom@v6

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

App.js

import * as React from "react";
import { Routes, Route, Link } from "react-router-dom";
import "./App.css";

function App() {
  return (
    <div className="App">
      <h1>Welcome to React Router!</h1>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
      </Routes>
    </div>
  );
}

Upvotes: 1

Related Questions