Menu
I'm a newbie to NextJS, It looks so good on the first impression. But after giving it a chance I've faced some problems like URL routing with custom params like react-router.
https://url.com/users?id:123
https://url.com/users/123
In react-router It has perfect example here https://reacttraining.com/react-router/web/example/url-params
958
In React JS, we would install a package called react-router-dom to implement routing inside the application. But Next JS has its own inbuilt router from the next/link , with which we can navigate between the pages. Before using the next/link , we need to set up the different pages/routes inside the pages folder.
The Next. js router allows you to do client-side route transitions between pages, similar to a single-page application. A React component called Link is provided to do this client-side route transition.
To get the query parameter from the above URL inside the <Items> component, we can use the useRouter() hook in next. js.
For anyone arriving late to this party, we now have dynamic routing in Next 9.
Which would allow for a url structure to be crafted like this by using the file structure, and without additional packages.
You could create a file pages/user/[id].js
With
import { useRouter } from 'next/router'
const User = () => {
const router = useRouter()
const { id } = router.query
return <p>User: {id}</p>
}
export default User
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
