One post tagged with "react-router"

While working on a migration to React Router v6 recently, I hit a snag while trying to take advantage of the much-improved nested routes feature. This was in an application using MaterialUI, with a top-level layout component presenting MUI Tabs to the user.

The v5 way​

Before the v6-style nested layouts, I was passing the tab route to a TabbedLayout component as a URL Parameter via dynamic segments (see :selectedTab in App.tsx below). The TabbedLayout component was in charge of rendering the layout, and choosing which tab content component to render. As you can see, it's convenient to provide the :selectedTab parameter to TabbedLayout, as it needs to know which tab is currently selected so it can highlight the correct tab:

import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
import { useState } from "react";
import TabbedLayout, { tabs } from "./TabbedLayout";

export default function App() {
  return (
    <BrowserRouter initialEntries={["tab1"]}>
      <Routes>
        <Route index element={<Navigate to={"tab1"} replace />} />
        <Route path="/:selectedTab" element={<TabbedLayout />} />
      </Routes>
    </BrowserRouter>
  );
}