ReactJS中如何从Nav1组件跳转到Categories组件的路由？

不需要完全重构代码，你可以通过以下步骤实现从Nav1组件跳转到目标路由：

1. 确保Nav1正确使用useNavigate钩子 #

Nav1作为函数组件，需要先导入并初始化React Router的useNavigate钩子，同时确保跳转时用到的page变量有有效值：

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

function Nav1({ userData }) {
  // 初始化navigate函数
  const navigate = useNavigate();
  // 确保page变量有定义，这里示例用固定值1，可根据需求调整
  const page = 1;

  const openOverlay = (postId, event) => {
    event.preventDefault();
    navigate(`/posts/${postId}/page/${page}`);
  };

  // 其余组件代码...
}

2. 确认路由结构的有效性 #

你的App组件已经用Router包裹了整个应用，Categories组件内的Routes属于全局路由配置的一部分，因此/posts/:postId/page/:page路径是全局可匹配的，只要没有其他路由规则覆盖该路径，跳转就能生效。

3. 排查可能的问题点 #

• 检查是否正确导入useNavigate：如果遗漏导入，会导致navigate未定义报错。
• 确保page变量有值：如果是动态获取的页码，需保证该变量已正确声明或通过props传入Nav1。
• 核对路由路径拼写：确认跳转路径与Categories中定义的Route path完全一致，包括斜杠、参数名等。

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