T
TanStack•2y ago
genetic-orange

File-based router open dialog in parent route

Hi, I'm trying to popup a dialog(/example/new) while keeping the parent content(/example) in the background, and I placed a <Outlet /> in the index.lazy.tsx, but it not working, it just render the /example/new 's content. What should I change to do so? Here is my router file structure 
example/
├─ index.lazy.tsx
├─ new.lazy.tsx
├─ $id.lazy.tsx
example/
├─ index.lazy.tsx
├─ new.lazy.tsx
├─ $id.lazy.tsx
4 Replies
genetic-orange
genetic-orangeOP•2y ago
After some trial, I found the following will work fined, but still looking soluation for the original structure(looks cleaner:)) 
(example)/
├─ example.lazy.tsx
├─ example.new.lazy.tsx
├─ example.$id.lazy.tsx
(example)/
├─ example.lazy.tsx
├─ example.new.lazy.tsx
├─ example.$id.lazy.tsx
adverse-sapphire
adverse-sapphire•2y ago
Have you tried naming example/index.lazy.tsx to example/route.lazy.tsx? Naming example/route.tsx is the same as example.tsx (but not example/index.tsx) so I would assume it works the same when appending .lazy
adverse-sapphire
adverse-sapphire•2y ago
You can read more about the .route file naming convention in the docs: https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing#file-naming-conventions
File-Based Routes | TanStack Router React Docs
Most of the TanStack Router documentation is written for file-based routing. This guide is mostly intended to help you understand in more detail how to configure file-based routing and the technical details behind how it works. Prerequisites
genetic-orange
genetic-orangeOP•2y ago
.route works the best, thx. 
example/
├─ route.lazy.tsx      // -> /example
├─ new.route.lazy.tsx  // -> /example/new
├─ $id.route.lazy.tsx  // -> /example/123
example/
├─ route.lazy.tsx      // -> /example
├─ new.route.lazy.tsx  // -> /example/new
├─ $id.route.lazy.tsx  // -> /example/123

Did you find this page helpful?