基于文件的路由对我来说并没有完全点击。早期的NextJS pages
文件路由工作得很容易。出于某种原因,我没有转换到基于Expo Route文件。可能是因为堆栈和标签和插槽的组合。我一直在阅读动态路由文档。当我从标签屏幕导航到/pattern/[id]
时,有些东西在翻译中丢失了,因为Expo找不到路线。我已经尝试了各种方法,但我认为这与我的文件夹结构有关。我想要的是:目标/pattern/[id]
是(tabs)的子项,而不是搜索。
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
字符串
下面是我的Tab_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
路由发生了什么?:
这是我目前的网站Map从博览会:
从那以后,我使用Stack添加了一个不同的Pattern _layout而不是Slot:
export default function PatternLayout() {
return (
<Stack>
<Stack.Screen
name="[id]"
</Stack>
);
}
型
但这似乎并没有解决问题...我请求帮助:
1.为什么router.push({ pathname: '/pattern', params: { id: label },});
不能正常工作?
1.我的文件结构是否正常?我是否需要在模式中使用堆栈屏幕来捕获[id].tsx
页面?提前感谢您
1条答案
按热度按时间7kqas0il1#
我不太确定,但我想在这里发表两点意见:
1.如果你想隐藏一个标签,不要使用
href: null
,而是使用tabBarButton: () => null
,这将隐藏标签,而不会扰乱路由。1.你的路由声明
router.push({ pathname: '/pattern', params: { id: label },})
会将路由器发送到下面的url:/pattern?id:123
。但你实际上想要的是它转到/pattern/123
。要做到这一点,请尝试使用router.push({ pathname: /pattern/
${label}``。这是为我工作的动态路由,希望它有帮助。