Next.js state management and dynamic routes
Hi. I'm working on a web app using Next.js. It's main purpose is to let me easily create and edit some entities related to a task. The entities live in a hierarchy. The actual entities don't matter, I'll use an IoT related example. Let's say we have
Let's say the directory structure according to the hierarchy is as follows:
The index page would show the list of devices, while the layout provides the nav bar for the entire app. The page inside the [deviceId] folder shows the list of firmwares available for the selected device.
The nav bar has search components to allow the user to quickly switch to any device / firmware / parameter. It looks something like the first screenshot. The search components become enabled as the relevant sub route is visited, so the search devices component is always enabled, the search firmware version component is enabled inside
The appropriate entity is fetched in the corresponding layout that lives in the right sub route, for example the selected device is collected here:
Then currently the collected device object is shared with components in the sub routes after that via a context.
My issue is with figuring out how to provide the selected device to the search device component in the nav bar.
Device -> Firmware version -> Available parametersLet's say the directory structure according to the hierarchy is as follows:
The index page would show the list of devices, while the layout provides the nav bar for the entire app. The page inside the [deviceId] folder shows the list of firmwares available for the selected device.
The nav bar has search components to allow the user to quickly switch to any device / firmware / parameter. It looks something like the first screenshot. The search components become enabled as the relevant sub route is visited, so the search devices component is always enabled, the search firmware version component is enabled inside
/device/[deviceId]/**The appropriate entity is fetched in the corresponding layout that lives in the right sub route, for example the selected device is collected here:
Then currently the collected device object is shared with components in the sub routes after that via a context.
My issue is with figuring out how to provide the selected device to the search device component in the nav bar.
Was this page helpful?
