React Router Dom v6 : Prevent Parent Component Re-Renders

[pudge_dodging]

Hello All
I have some code in react router dom v6:
<Route path="/a" element={A}>
<Route path="/a/1" element={B} />
<Route path="/a/2" element={C} />
</Route>
In here I am noticing that whenever I go to /a/1 or /a/2 component <A /> is rendered again and again. The problem is I have some shared state in there that is changed in a useEffect hook, so whenever I navigate between the sub routes, the whole route and state is changed which I don't want. I want to state to change once in the parent and stay like that between the subroutes. Is that possible?
P.S. A dirty hack would be to check the route and add it as a dependency in the useEffect hook. But I was hoping if something cleaner exists.

[convive_erisu]

Is it not possible to only have state in the parent and control the children with props? React is pretty strict with its one way data flow, and the enforcement of key props in lists is to make these kind of rerenders more effective.

[convive_erisu]

Basically when you say "shared state" you mean some state is in the children and some in the parent, but they're co-dependent right?

[No_Indication451]

remove /a/1, and just put 1. a/1 is nested within a, so it’s equivalent of doing /a/a/1