在动态路由上使用基于文件的路由器进行导航时遇到问题

Question

基于文件的路由并没有完全适合我。早期的 NextJS pages文件路由很容易工作。由于某种原因，我还没有转换为基于世博路线的文件。可能是因为堆栈、选项卡和插槽的组合。我一直在阅读动态路线文档。当我从选项卡屏幕中导航到 时/pattern/[id]，由于 Expo 找不到路线，翻译中有些内容丢失了。我尝试了各种各样的方法，但我认为这与我的文件夹结构有关。我想要的是：目的地/pattern/[id]是（选项卡）的子级，而不是搜索。

app
  |__(auth)
     |__ _layout.tsx
     |__(tabs)
       |__ index.tsx
       |__ _layout.tsx
       |
       |__ search
       | |__ index.tsx // <-- from where I navigate from
       | |__ _layout.tsx
       |
       |__ pattern // <-- where I want to navigate to
       |  |__ _layout.tsx
       |  |__ [id].tsx // <-- dynamic pattern id name 
       |__ // other tabs content is ok since no navigation

这是我的选项卡的 _layout ：

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen
        name="index"
      />
      <Tabs.Screen
        name="search"
      />
      <Tabs.Screen
        name="pattern"
        options={{
          href: null, // based on docs this will hide the tab
      />
  </Tabs>
 )
};

在我的搜索用户界面上，当我按下要导航到的项目时，

router.push({
  pathname: '/pattern', // I have also tried pathname: '/pattern/[id]', 
  params: { 
    id: dynamicLabelId
  },
});

Expo的错误是找不到路线。路线发生了什么pattern？：

这是我当前在世博会上的站点地图：

此后，我使用堆栈添加了不同的 Pattern _layout 而不是插槽：

export default function PatternLayout() {
  return (
    <Stack>
      <Stack.Screen
        name="[id]"
    </Stack>
  );
}

但这似乎无法解决问题...我正在寻求帮助：

1. 为什么router.push({ pathname: '/pattern', params: { id: label },});工作不正常？
2. 我的文件结构好吗？我是否需要在模式内使用堆栈屏幕来捕获[id].tsx页面？先感谢您

Answer 1

我不完全确定，但我想在这里发表两点评论：

1. 如果您想隐藏选项卡，请不要使用href: null，而是使用tabBarButton: () => null，这将隐藏选项卡而不会扰乱路由。

2. 您的路由声明router.push({ pathname: '/pattern', params: { id: label },})会将路由器发送到以下 url: /pattern?id:123。但你真正想要的是去/pattern/123。为此，请尝试使用router.push({ pathname: /pattern/`${label}` .

这对我的动态路由很有用，希望有帮助。