note: after writing this, I found a more robust explanation done by Juwon Owoseni at LogRocket. you can read that here!

In my experience, the primary reason to start a programming blog is to introduce yourself to a handful of new technical problems, solve some of them, then forget about the blog in about a week. Before I forget about this blog, I'm gonna show you how to do this:

export default () => {
  return (
    <div>
      <h1>Hello World</h1>
      <p>Play with me!</p>
    </div>
  );
};

By writing markdown (technically .mdx) like this:

<SandpackEditor>

```tsx
export default () => {
  return (
    <div>
      <h1>Hello World</h1>
      <p>Play with me!</p>
    </div>
  );
};
```

</SandpackEditor>

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>
  );
}