如何使用 React-Router 将查询参数传递给父组件？答案

【问题标题】：How can I pass a query parameter to a parent component with React-Router?如何使用 React-Router 将查询参数传递给父组件？
【发布时间】：2023-01-24 23:52:40
【问题描述】：

所以在我的 Forum.tsx 文件中，我有一个指向帖子相应 ID 的链接：

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

在我的应用程序组件中，我想以某种方式传递查询参数并呈现 ViewPost 组件：

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

但这显然不是正确的做法。我会将 PostId 作为 prop 传递给应用程序组件，但我知道你不能将 props 传递给 React 中的父组件。有没有其他方法或更简单的方法来完成这项工作？

【问题讨论】：

我不太确定你遇到的问题是什么。你不能使用react-router的useParams来获取你的<ViewPost>组件中的postId吗？
我试过加入 const { postId } = useParams();到 ViewPost.tsx，但这似乎不起作用，所以我开始认为我的整个方法是错误的。
你在使用 TypeScript 吗？如果是这样，您需要定义参数的类型，即 type ViewPostPageParams = { postId: string; } 并强烈键入您的 useParams：const { postId } = useParams<ViewPostPageParams>();

标签： reactjs react-router

【解决方案1】：

愚蠢的错误，显然我忘记了 / in

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

它应该是

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

【讨论】：