index-index and index-layout route.

[andrei9669]

I understand that the title might be a bit convoluted but I have no idea how to title this.

I have been trying to migrate from SPA, using react-router v6, to remix but I have come to a problem. I have no idea how to reproduce this route config using remix's route system

export const routes: RouteObject[] = [
  {
    index: true,
    element: <Landing />,
  },
  {
    path: '/',
    element: <AppLayout />,
    children: [
      {
        path: 'path1',
        element: <Path1 />,
      },
      {
        path: 'path2',
        element: <Path2 />,
      }
    ],
  },
  { path: '*', element: <Navigate to="/" /> },
];

routing would resolve to something like this

// url.com
<Landing />

// url.com/path1
<AppLayout>
  <Path1 />
</AppLayout>

// url.com/path2
<AppLayout>
  <Path2 />
</AppLayout>

Altho, I'm not sure if it's even possible.

[silvenon]

Remix has got you covered, this is exactly what pathless routes and splat routes are for 😃

app/
├── routes/
│   ├── $.tsx
│   ├── __app/
│   │   ├── path1.tsx
│   │   └── path2.tsx
│   ├── __app.tsx
│   └── index.tsx
└── root.tsx

• $.tsx is your * route, but instead of Navigate I recommend using redirect instead
• __app.tsx is the layout route that will apply only to __app/path1.tsx and __app/path2.tsx, not index.tsx, and because you're using pathless routes there won't be any effect on the URL
• index.tsx is your landing page

[andrei9669]

oooh, I was not aware of this, this makes stuff so much easier. thank you.

[arnaudambro]

linked to #1907 with my question:

In have another use case : I'm trying to create a social network, where / would be the route for the feed to be shown, and /new-post to be the route to create a new post, above the feed, like when you create a new post on LinkedIn.
Then all the other routes (/profile, /onboarding...) are not on top of the feed.

I can't find the proper route folder setup to do so.
I tried to follow the pattern in #1474 but for now it's not successful...

I'm trying

app/
├── routes/
│   ├── __home/
│   │   ├── $.jsx
│   │   └── new-post.jsx
│   ├── __home.jsx
└── root.jsx

but nothing is rendered

Then I try to replace the splat route `__home/index.jsx

app/
├── routes/
│   ├── __home/
│   │   ├── index.jsx
│   │   └── new-post.jsx
│   ├── __home.jsx
└── root.jsx

But the /new-post route doesn't render on top of the feeds anymore

I don't know where next to go !

[eladchen]

Would love to understand how to do this with v2

[silvenon]

Like this?

_app.jsx
_app.path1.jsx
_app.path2.jsx
_index.jsx
$.jsx

See route file naming.

But soonish you won't have to know these conventions anymore, you'll be able to define routes differently and put the files wherever you want, similar to today's manual route configuration.

[eladchen]

What's planned?

[silvenon]

routes.ts