0

So in my Forum.tsx file, I have a link directing to the corresponding id of the post:

        <Link to={`/forum/${value.PostId}`}>
          <b>{value.Title}</b>
        </Link>

In my app component I want to pass the query parameter somehow and render the ViewPost component:

  <Route path={`forum/:postId`} element={<ViewPost />} />

But this is obviously not the right way to do it. I would pass the PostId as a prop to the app component, but I know you can't pass props onto parent components in React. Is there another way or a simpler way to get this done?

Chan Kim
  • 159
  • 8
  • I'm not quite sure what the problem you are having is. Can you not use `react-router`'s `useParams` to get the `postId` in your `` component? – nbokmans Jan 24 '23 at 11:30
  • I've tried throwing in a const { postId } = useParams(); to ViewPost.tsx, but that didn't seem to work so I started to think my whole approach was wrong. – Chan Kim Jan 24 '23 at 11:32
  • Are you using TypeScript? If so, you need to define the type of your params i.e. `type ViewPostPageParams = { postId: string; }` and strongly type your useParams: `const { postId } = useParams();` – nbokmans Jan 24 '23 at 11:52

1 Answers1

0

Silly mistake, apparently I forgot the / in

<Route path={`forum/:postId`} element={<ViewPost />} />

It should be

 <Route path={`/forum/:postId`} element={<ViewPost />} />
Chan Kim
  • 159
  • 8