The template components are re-created on every route change

[branchard]

In src-example the template components are re-created on every route change because react will create a separate instance of your Layout for each route. It's annoying because react will re-generate template's DOM on every route change and every child components of this template will be reset.

Please fix your router structure.

[branchard]

Why did you close my issue? This is a real problem with your structure.

For example if I put an input in your Header component (in "src-example"), the input will be reset on every route change:

[diegohaz]

I'm sorry, @branchard. I wrote an answer but forgot to send it. 😅

That's how react-router works. It re-mounts components on every route change. Since templates are inside pages, they are re-mounted as well.

You need to put those components (e.g. Header) outside of the page (e.g. in the App component).

Edit Also, if your problem is related to the form state, I recommend you to use redux-form or another way to keep the form state on the redux store.

[branchard]

With Atomic Design methodology Header must be in a page or a template. There is no other way than to put Header outside of the page ?

I think it's not optimized/clean to re-mouts whole template on each route change :confused:

[diegohaz]

You can create an AppTemplate and use it on App. There's nothing wrong with that.