What is the best way to push to a dynamic route in this case?
Unanswered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
This is a page.tsx file inside frontend/src/app/checkout/ of my personal project. Using next/router to import useRouter was triggering an error ¨NextRouter not mounted". I had no success on fixing that so I changed to next/navigation, which doesn´t trigger an error when I access that page, but nothing happens when I click on "Finish"
import { useRouter } from 'next/navigation'
{ ...rest of the code... }
<button
className='bg-gray-600 text-white'
onClick={ async () => {
const now = new Date
placeOrder({
createdAt: now,
updatedAt: now,
discount: 0,
shipping: calculateShipping(),
subtotal,
total: calculateShipping() + subtotal,
userId: 1,
addressId: 1,
shipmentType: shipping,
productsList: cartProducts
}).then((order) => {
if (order) {
router.push(/thankyou?orderId=${ order.id })
}
})
}}
>
Finish
</button>
</>
)
}2 Replies
@Asiatic Lion This is a page.tsx file inside frontend/src/app/checkout/ of my personal project. Using next/router to import useRouter was triggering an error ¨NextRouter not mounted". I had no success on fixing that so I changed to next/navigation, which doesn´t trigger an error when I access that page, but nothing happens when I click on "Finish"
`import { useRouter } from 'next/navigation'
{ ...rest of the code... }
<button
className='bg-gray-600 text-white'
onClick={ async () => {
const now = new Date
placeOrder({
createdAt: now,
updatedAt: now,
discount: 0,
shipping: calculateShipping(),
subtotal,
total: calculateShipping() + subtotal,
userId: 1,
addressId: 1,
shipmentType: shipping,
productsList: cartProducts
}).then((order) => {
if (order) {
router.push(`/thankyou?orderId=${ order.id }`)
}
})
}}
>
Finish
</button>
</>
)
}`
Turkish Van
By using
But, that route is not a dynamic route. It is a pure route that has
Also, You should enclose the string in quotation marks when specifying the URL in
/thankyou?orderId=${ order.id }, You are redirecting user to the following route.But, that route is not a dynamic route. It is a pure route that has
searchParams which You can access in multiple ways, based on if Your component is a Server/Client component.Also, You should enclose the string in quotation marks when specifying the URL in
router.push method. It would look like this:router.push('/thankyou?orderId=${order.id}')Asiatic LionOP
I'm sorry, I don´t know why the quotation marks didn´t show. Here's a screen shot instead