I am currently attempting to pass parameters to a dynamic page within an Amplify/NextJS application.
This is still a work in progress. My objective is to utilize the passed parameters to generate a basic page based on 4 parameters included in the URL invocation.
The issue I am encountering is that when I make modifications beyond just a few statements in the dynamic page file, the parameters cease to be passed - or more likely, they are somehow getting corrupted.
The code for the dynamic page file ([id].js) is quite straightforward:
import {useRouter} from 'next/router'
export default function Detail() {
const router = useRouter()
console.log('router', router)
const {id, params} = router.query
console.log('id', id)
console.log('params', params)
// const parsed = JSON.parse(params)
}
Below is the code that triggers the page (note the JSON.stringify() in the onClick() function):
export function GetDanzanRyuCollection(narration, items, path) {
return (
<>
<View>
<Text>
{narration}
</Text>
<Collection
type="list"
items={items}>
{(item, index) => (
<View
key={index}
onClick={() => {
let parms = JSON.stringify(item)
window.location.href = `./${path}/${item.Number}?params=${parms}`
}}>
<Card
width={"40rem"}
variation={"elevated"}
key={index}
padding="1rem"
textAlign={"left"}
backgroundColor={"blue.20"}
fontSize={"1.5rem"}>
<Flex
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
alignContent="flex-start"
gap="1rem">
<Text
width="2.25rem">
{item.Number}
</Text>
<Text
isTruncated="true"
height="3.0rem"
width="15.25rem">
{item.Name}
</Text>
<Text
isTruncated="true"
height="3.0rem"
width="19.25rem">
{item.Description}
</Text>
<Rating
maxValue={1}
value={item.Variations.length}
icon={<ImVideoCamera/>}/>
</Flex>
</Card>
</View>
)}
</Collection>
</View>
</>
)
}
When using the unaltered code above, I see the expected output in my browser log. In other words, the parameters are successfully passed:
https://i.stack.imgur.com/0NA5k.png
However, if I uncomment the
const parsed = JSON.parse(params)id and params now display as undefined):
https://i.stack.imgur.com/c4xgI.png
So, what mistake am I making? Additionally, why are there multiple calls to the [id].js file function for a single click?