How to reset layout changes when the <Layout> component unmounts?

[viconx98]

The changes I make to the FlexLayout layout such as resizing, open/close tabs etc. are somehow persisted between component mount and unmount.

For example, If I mount the FlexLayout component, open some tabs, unmount the component, remount the component then the tabs I opened previously are still there.

How do I disable this behaviour? When my <Layout/> component mounts I always want it to start with the Model that I have statically defined.

My use case:
I have a dynamic route /space/:id that renders a FlexLayout, so showing change made on one route on a completely different route leads to bad user experience.

For example, right now I can go to route /space/abc make some changes to the layout, then go to route /space/xyz and can see the changes I made on /spaces/abc.

Thanks!

[nealus]

The layout is defined in the model which is changed by the gui as you move tabs etc.

To reload the model use Model.fromJson(jsonModel) to create a new model from your static json for each page.

[viconx98]

Thank you for the prompt response. I also realized this after I posted the question.
This behaviour was a side-effect of how I had set up FlexLayout.

For anyone who runs into a similar issue in future, here is what I had to change.

Before

import { IJsonModel, Model } from "flexlayout-react"

const modelSchema: IJsonModel = { ... } 
// Layout model defined outside component, so every instance of <Layout/> kept referring to the same model.
const model = Model.fromJSON(modelSchema)

const Component = () => {
  return <Layout model={model} />
}

After

import * as React from "react"
import { IJsonModel, Model } from "flexlayout-react"

const modelSchema: IJsonModel = { ... } 

const Component = () => {
  // Layout model defined inside component, so every instance of <Layout/> gets a fresh model.
  const model = React.useMemo(() => Model.fromJSON(modelSchema), [])

  return <Layout model={model} />
}