Quiero usar Recoil para compartir un estado entre React Router Routes. Mi configuración se parece a esto:

 ReactDOM.render( <React.StrictMode> <RecoilRoot> <BrowserRouter> <Routes> <Route path="/" element={<App />} /> <Route path="/checkin" element={<Checkin />} /> <Route path="/checkin/confirm" element={<ConfirmCheckin />} /> </Routes> </BrowserRouter> </RecoilRoot> </React.StrictMode>, document.getElementById("root") );

La configuración de mi átomo se ve así:

 const checkinItemsState = atom<InventoryItem[]>({ key: "checkinItemsState", default: [], });

En ambos componentes uso useRecoilState(checkinItemsState)

Ahora, cuando abro localhost:3000/checkin , muestra mi estado y puedo modificarlo. Cuando luego navego a localhost: 3000/checkin/confirm mi estado es solo una matriz vacía.

¿Que me estoy perdiendo aqui? hay algo que no entiendo?

Hasta ahora, he intentado envolver mis Rutas con un componente como:

 const Index: React.FC<{ children: ReactNode }> = ({ children }) => { useRecoilState(checkinItemsState); return ( <> <span>Hello World</span> {children} </> ); };

Supuse que tal vez era porque no se hacía referencia al estado cuando se movía entre URL. Esto no funciona.

Cualquier ayuda sería apreciada.