如何通过React-Router传递路由参数并在目标组件中获取？

你的路由配置本身是没问题的，不需要把PostId传给App组件，直接在ViewPost组件里通过React Router的useParams钩子就能获取到路由参数，步骤如下：

• 首先在ViewPost组件中导入useParams：

  import { useParams } from 'react-router-dom';
  

• 然后在组件内部获取路由里的postId参数：

  const ViewPost = () => {
    // 泛型用来指定参数类型，避免TS类型报错
    const { postId } = useParams<{ postId: string }>();
  
    // 接下来就可以用postId去拉取对应帖子的数据，比如调用接口
    // 示例：
    // useEffect(() => {
    //   if (postId) {
    //     fetch(`/api/posts/${postId}`)
    //       .then(res => res.json())
    //       .then(postData => {
    //         // 处理并渲染帖子数据
    //       });
    //   }
    // }, [postId]);
  
    return (
      <div>
        <h2>帖子ID：{postId}</h2>
        {/* 渲染帖子具体内容 */}
      </div>
    );
  };
  
  export default ViewPost;
  

原理很直接：React Router会自动把动态路由里的参数（比如:postId）存储在路由上下文里，useParams就是用来从这个上下文中提取参数的钩子，直接在目标组件里调用即可，完全不需要通过父子组件传参的方式绕路。

内容的提问来源于stack exchange，提问作者Chan Kim