React Navigation路由跳转问题：路径叠加且无法清除历史记录

问题原因 #

你当前的写法中，navigate方法传入了拼接后的完整路径，但React Navigation的navigate默认是相对当前路由跳转，会把你传入的路径拼接到当前路由后面，导致路径叠加。比如当前在/tabbiereact/admin/create_task_cat，传入/tabbiereact/admin/list_task_cat会被当作相对路径处理，最终变成/tabbiereact/admin/create_task_cat/tabbiereact/admin/list_task_cat。

解决方案 #

1. 直接使用路由名称跳转（推荐） #

如果你的导航器中已经定义了list_task_cat这个路由名称，直接传入路由名即可，无需拼接路径：

onClick={() => navigate('list_task_cat', { replace: true })}

• replace: true会替换当前的路由历史记录，不会保留之前的路由栈。
• React Navigation会自动根据导航器配置生成正确的路径，避免手动拼接出错。

2. 重置导航栈完全替换历史记录 #

如果需要彻底清除之前的路由历史，可使用reset方法：

import { CommonActions } from '@react-navigation/native';

onClick={() => {
  navigation.dispatch(
    CommonActions.reset({
      index: 0,
      routes: [{ name: 'list_task_cat' }],
    })
  );
}}

这种方式会把整个导航栈重置为只有list_task_cat这一个路由，完全清除之前的历史。

3. 正确使用绝对路径跳转（仅当导航器支持时） #

如果必须用路径跳转，不要拼接window.mainurl，直接传入相对于根目录的绝对路径：

onClick={() => navigate('/list_task_cat', { replace: true })}

注意：这种方式依赖导航器的配置支持，不同版本的React Navigation可能存在差异，优先推荐使用路由名称跳转。

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