Preserving history when targeting a turbo-frame?

I’m following the example in the handbook where they have two turbo frames, a main panel and a set-aside frame. The main panel has target='set-aside' on it, and links in the main panel correctly render in the set-aside frame rather than taking the whole browser window (cool!). What I am having trouble understanding is how navigation history is supposed to work. I had naively hoped/assumed that Turbo would cache each page change and store those in its own history, so that hitting the back button would just reload the last bit of frame content, rather than the last full page load. This doesn’t seem to be the case - when I hit the back button I go back to whatever the last page was, not the last link that was rendered in the frame.

I’ve seen some examples that push the linked url to the history via a stimulus controller, but they haven’t worked for me in this case because my linked view only has the content for the frame, not the whole page - so if the browser tries to load it directly I only get a fragment of the page to render.

What is the best practice for navigation history with frames? It feels like it must be important to enable the back button, but so far I haven’t had any luck finding examples of how to do it for this layout pattern.

Hey, I am having the same experience. Have you solved this yet? @cbandes

Hi @ordin I ended up using a solution based on this gist turbo_frame_history_controller.ts · GitHub that was posted in another thread. It works pretty well most of the time, though I occasionally run into some odd behavior which I am still working on.

2 Likes