React Router v7, Can't reuse a layout?

[skrichten]

I don't see a reason why we shouldn't be allowed to reuse the same layout with different parents...

export default [
    layout('./layout/webgl.tsx', [
      index('routes/home.tsx'),
      layout('routes/ScreenShader.tsx', [
        route('blocks', './components/Blocks.tsx'),
      ])
    ]),
    layout('./layout/webgpu.tsx', [
      layout('routes/ScreenShader.tsx', [
        route('wavelines', './components/WaveLines.tsx'),
      ])
    ])
] satisfies RouteConfig;

Gives error Unable to define routes with duplicate route id: "routes/ScreenShader"

[sergiodxa]

You can do it by assigning a custom route id layout("routes/ScreenShader.tsx", { id: "custom" }, []).

The router generates a route id based on the file path, since the file is the same you need to customize it to use it multiple times.

[skrichten]

Gotcha, thanks for that!