Open id view content from Tanstack Table with Tanstack Router
Anyone has any tip how I can render a new view in the current page of a selected item ?
So im using tanstack table, query and router and if I want to open a new page when clicking an item and receiving that Item id, everything works wonderfully.
But my idea is to have a table and open a view next to it instead of on a new url page.
This open a new page inside the id with the router perfectly. But what if I want just to open a new component or view inside the same page ? Anyone has a tip for this ?
Any tip appreciated.
27 Replies
@dan I want to do something like this.
Like my code works great if I want to open a new page. But in this case I dont want a full page, I want a view that will overlap the maps component when I click on one item
So I would render the item settings component of the respective item id.
This has an example on how to do what you want
https://tanstack.com/router/v1/docs/examples/react/basic-file-based
You can see the _layout.tsx, this has the "main" page layout stuff, in your case the sensors, stations, last seen etc, elements.
Inside the _layout folder it contains the "inner" sections, if you instead of having multiple routes there use a dynamic route ($whatever.tsx) then you can have that be loaded and fetch the data and render as needed.
React Router Basic File Based Example | TanStack Router Docs
An example showing how to implement Basic File Based in React Router
Thank you so much. Ill take a look after lunch
np, if you get stuck at all getting it working initally let me know.
@dan so I have two folder.
list.items and list.items.$id
on the first folder I have a +component with just
right will display the map when no itemId or the settings view with the itemId. for now I just leave Outlet to test somethings.
my +routefile inside list.items folder has:
This loads the inicial page. Table has the same
my list.item.$id folder has a similar structure but component has
And +route
Im guessing this route is the problem since I cloned the project example and testing on my machine, and Im failing to see how I still have a new page.
on the rootRoute have you added the children (itemListIdRoute) to listItemsRoute?
yes I did.
itemRoute.addChildren([
itemListIndexRoute,
itemListIdRoute,
]),
Something like this
oh uh try adding an index next to the dynamic route which would just be a default page when nothing is selected
I had to come on the street I’ll try and report back later 🤝
Aight just got home. Gonna continue to check the example and compare what im doing.
The only thing I can see me messing up are these +route.tsx files I have, other than that, im blind. But ill continue comparing with the folder and see what I have
Ven the simple "layout A, B" should be enough to compare properly.
if you have a repo I can take a look, I do remember it being a bit finicky to setup the first time.
I think I see the problem.
This is the main route
So there is an Outlet for the main page where Im going to render my page and then inside that page I want to have another Outlet.
@dan I can prepare a basic repo with the necessary files if you want to take a look, but the full project is a bit large.
multiple outlets is fine
idm, either works, up to you really
Aight give me 5min I can wrap the files im working on together. Cant promise the code will run because probably wont but at least you can have a bigger picture
GitHub
GitHub - FACorreiaa/tanstack-router-example: tanstack router exampl...
tanstack router example to render things. Contribute to FACorreiaa/tanstack-router-example development by creating an account on GitHub.
Tell me if this would be enough to check out what im doing and not doing properly
it might be the paths actually
Not 100% sure but all mine are the full path, including the starting
/
I guess i'll just have to continue to try and catch around the files
Cuz from the example, I dont seem to be doing anything wrong. But just dont get why with the <Outlet /> the the right property, I still open a new page.
Try installing the router devtools and see what routes are matching
Good idea!
so /operations/sensors is the root where I see the left panel (table) and will conditionally render the right component based on the route
Created a new folder just to test and changed the RouterLink to="settings"
/operations/sensors/settings
Open a new page
And I think the base configuration is the culprit here
Everything is being rendered inside this <Outlet />
If I try to make something like
i'll get an error on the useQuery usage and const context = useRouteContext(routeOptions);
etcetc
Ah ok im starting to remember bits now
Basically how I have it setup is my "layout" router (in your case
operationsRoute
) is using a pathless route
https://avrg.dev/d3SoG.png
https://avrg.dev/AvfNv.png
https://avrg.dev/yaC0d.png
Atm you have every router defining a path, the route you want as the layout should have an Id instead of a path.Route Paths | TanStack Router Docs
Route paths are used to match parts of a URL's pathname to a route. At their core, route paths are just strings and can be defined using a variety of syntaxes, each with different behaviors. Before we get into those behaviors, let's look at a few important cross-cutting path concerns.
Leading and Trailing Slashes
Pathless route, damn. Let me try to implement somethings after lunch and see if it fixes or changes something