Dynamic routing gives an error when updating the page Next.js

Question

Tell me, there is a problem with dynamic routing. When I click on the link /card/[id] . Then everything works correctly, the id of this card is attached to the path that I clicked on, but if I try to refresh the page after the transition, then I get an error:

As I understand it, when updating a page from its route, the id is lost, which is why fetch cannot be executed

                            job.map(job=> {
                                return <div className="card" id="c4">
                                    <div className="column" id="contentColumn">
                                        <div className='titleCard'>{sale.title}</div>
                                        <div className='textCard'>{sale.description}</div>                                         
                                        <div className='salaryCard'>{sale.salary}&#8381;</div>
                                        <div className='btnDiv'>
                                            <Link href={{
                                                pathname: '/job/[id]',
                                                query: { id: job.id }
                                            }}>
                                                <button className='btnModal' >More info&#10095;</button>
                                            </Link>
                                        </div>
                                    </div>
                                </div>
                            })

Here it successfully switches to http://localhost:3000/job/cl58a9vii

On a new page (http://localhost:3000/job/cl58a9vii ), I'm doing a useeffect to pull up the data

const Job: NextPage = () => {
    const [title, setTitle] = useState('')
    const [description, setDescription] = useState('')
    const [office, setOffice] = useState('')
    const [exp, setExp] = useState('')

    const router = useRouter()
    const { id } = router.query

    useEffect(() => {
        async function start() {
            const res = await fetch('/api/job/' + id, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            if (res.ok) {
               let job = await res.json()
                console.log(job)
                  setDescription(job.description)
              
           
            }
        }
        start()
    }, [])

    return (
<h1>{description}</h1>
)

API

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    const { id } = req.query
        if (req.method === 'GET') {
            if (typeof id === 'string') {
                const answer= await db.job.findUnique({
                    where: { 
                        id: id },
                })
                res.send(answer)

And at the first download everything works correctly , but when updating this page , an error is issued

Answer 1

Try to set router as parameter of useEffect

useEffect(()=>{
    if (router.isReady) {
        async function start() {
            const res = await fetch('/api/job/' + router.query.id, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            if (res.ok) {
               let job = await res.json()
                console.log(job)
                setDescription(job.description)
            }
        }
        start()
    }

}, [router.isReady]);