无法让React Native Expo应用程序导航到特定路线

Question

昨天，当我试图让 Expo 的基于文件的路由适用于我正在从事的项目的特定路线时，我陷入了困境。文件夹结构如下所示：

index.tsx
_layout.tsx
+not-found.tsx
(home)
    (tabs)
    _layout.tsx
        (learning)
            lessons
                (quiz)
                    _layout.tsx
                    [lessonId].tsx <---- Where I'm trying to navigate to
                _layout.tsx
                [unitId].tsx <---- Where I'm navigating from
            _layout.tsx
            index.tsx
        profile
        _layout.tsx
      

我正在尝试从

[unitId].tsx

文件的路线导航到

/(quiz)/[lessonId]

。由于某种原因它不起作用，而是总是带我到

+not-found.tsx

，这意味着我在路由方面的努力不正确。

这就是

_layout.tsx

目录中的

(learning)

文件的样子：

import { Stack } from 'expo-router'

const UnitScreenLayout = () => {
    return (
        <Stack>
            <Stack.Screen
                name="index"
            />
            <Stack.Screen 
                name="lessons"
            />
        </Stack>
    )
}

export default UnitScreenLayout

这就是

_layout.tsx

目录中的

lessons

的样子（不包括导出和导入）：

const LessonsScreenLayout = () => {
    return (
        <Stack screenOptions={{ headerShown: false }}>
            <Stack.Screen 
                name="(quiz)"
            />
            <Stack.Screen 
                name="[unitId]"
            />
        </Stack>
    )
}

在

(learning)/index

中，当我尝试使用以下命令导航到

lessons/[unitId]

时，它会起作用：

router.navigate({ pathname: `/lessons/${unit.id}` })

但是，当我尝试从

/(quiz)/${lesson.id}

导航到

lessons/[unitId]

时，它不起作用。我不明白为什么，因为布局文件的设置方式基本相同。

_layout.tsx

中的

(quiz)

文件仅包含

Stack.Screen

的

[lessonId]

。

我尝试了各种方法，包括在

index.tsx

内创建

(quiz)

文件并尝试导航到该文件，从

(quiz)

中存在的任何地方删除方括号，并将

(quiz)/[lessonId]

添加到

_layout.tsx 中的 

lessons

 文件中

目录，但没有任何效果。

Answer 1

文件夹名称两边的括号称为“组”。他们纯粹是组织文件，但根本不创建新路线。 在您的情况下， [lessonId].tsx 和 [unitId].tsx 存在于同一级别，即使它没有通过文件夹结构显示。您应该删除测验周围的括号并重试，或者重新考虑如何组织路线。