coarse coyote
I have a usecase where I need to build a multi step form, where each stpe will be a child route of a parent - so my-form/step-1, my-form/step-2, and so on. Ideally i'd like to be able to pull the array of child routes and make a fuction that takes the current route and tells me where to go next/previous
Is there a way I can pull this info from the routes.ts file? or the types file? And specifically make these strings typesafe?
Sorry to tag you @quick sonnet but I think you did something similar way back when. I just can't find it anywhere
clever jungle
My two cents, would the section titled “DYNAMIC NESTED ROUTES IN REACT ROUTER” here work for your particular use case?
quick sonnet
what I did is to have a static list, and then on each route file export a handle object with the step, and in the list I find this handle using useMatches and mark the current step as active, the previous as completed and the following as uncompleted
// add this to every step route
export const handle = { step: "step-1" }
// use this to find the current step
function useCurrentStep() {
// if you use TS you will need to improve this to correctly confirm match.handle is an object, maybe use Zod
let match = useMatches().find(match => "handle" in match && "step" in match.handle)
return match.handle.step
}
// then when you render the list
function StepList() {
let currentStep = useCurrentStep() // current step
let steps = [ // static list of steps
{ id: "step-1", name: "Step 1" },
{ id: "step-2", name: "Step 2" },
// more steps
]
return (
<ul>
{steps.map(step => {
let isCurrent = step.id === currentStep
return (
<li key={step.id}>
// render something to indicate this is the current step
{step.name} {isCurrent && "Current"}
</li>
)
})}
<ul>
)
}