0
142
ViewsFacing dynamic routing problem in next.js
So i have this dynamic page in next js
import { useRouter } from 'next/router'
import { WEB_RELATED, PC_EXES } from '../../components/Data';
export default function title() {
const router = useRouter();
const { index } = router.query;
console.log(index.length)
return (
<div>
</div>
)
}
on that dada.length statement i get the error -> dada not defined, i tried to do the same with index directly but it gave me same problem. I want to get two strings from the index parameter how do i do that?
·
Juan Pablo Isaza
1 answers
Answer question0
You need to test if index is defined first. Here is an example on how to deal with router query :
PS : Code available below images
PSPS : Check the documentation https://nextjs.org/docs/routing/dynamic-routes
// pages/testStackOverflow/[index].js
import React, {useEffect} from 'react';
import {useRouter} from 'next/router'
const Title = () => {
const router = useRouter();
const {index} = router.query
// Don't use console.log directly below index because his value can be changed
useEffect(() => {
console.log('value', index, 'length : ', index?.length);
// You can use if statement
/* if(index) {
doSomethingHere
}*/
// Triggering router change with useEffect
}, [index])
return (
<div>
{index}
</div>
)
};
export default Title;
Hope I could help you.
·
Juan Pablo Isaza
Report
Answer question