Accessing variable from another file in dynamic routing
Answered
QBit posted this in #help-forum
QBitOP
I have a nextjs app. I have this code in my
I want to use this "problemID" variable in
app/problems/[problemID]/page.tsxtype Props = { params: { problemID: string} }I want to use this "problemID" variable in
@components/custom/excalidraw-wrapper.tsx file. What to do?15 Replies
Madeiran sardinella
Hi, is excalidraw-wrapper being rendered on that page? You can simply pass it from page to component by props
@QBit I have a nextjs app. I have this code in my `app/problems/[problemID]/page.tsx`
tsx
type Props = { params: { problemID: string} }
I want to use this "problemID" variable in `@components/custom/excalidraw-wrapper.tsx` file. What to do?
use global states using any state managment libraries or just context
@QBit I have a nextjs app. I have this code in my `app/problems/[problemID]/page.tsx`
tsx
type Props = { params: { problemID: string} }
I want to use this "problemID" variable in `@components/custom/excalidraw-wrapper.tsx` file. What to do?
Turkish Van
Pass it as a prop to that component.
Of course, possible only if that component is being rendered on that page.
Of course, possible only if that component is being rendered on that page.
if it's already a client component:
if it's a server component: simply pass the value as prop
useParamsif it's a server component: simply pass the value as prop
@Madeiran sardinella Hi, is excalidraw-wrapper being rendered on that page? You can simply pass it from page to component by props
QBitOP
yeah, it is rendered, how can I pass?
can someone provide me the demo code?
any reference
@QBit any reference
Madeiran sardinella
Answer
Example taken from the doc page
'use client'
import { useParams } from 'next/navigation'
export default function ExampleClientComponent() {
const params = useParams<{ tag: string; item: string }>()
// Route -> /shop/[tag]/[item]
// URL -> /shop/shoes/nike-air-max-97
// `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
console.log(params)
return <></>
}Your case would be const { problemId } = useParams()
QBitOP
okay, let me try
thank you!!