I’m learning Next.js and practicing it by building a simple Todo application.

Currently I have 2 different pathnames in my application:

1. / which renders Todo list
2. /add which renders a form to add new Todo

I want to add a 3rd pathname which will be dynamic route /edit/[todoId]. I want this route to be rendered when user clicks one of the Todo list’s item’s Edit button. So, user won’t be viewing a new separate page where a form similar to /add shows up, instead the item will change into a form and all other elements in the page will remain the same. Also the browser URL will change to /edit/[todoId]. When also user refreshes the page on URL /edit/[todoId], they will see the same page. How can I do this?

I thought I could use intercepting or slot routes but I’m not sure if it would provide the needed functionality. One other idea came to my mind was to use usePathname hook and decide which todo item should render an edit form instead of the todo item details but this would be difficult since the list is being rendered at / pathname.