Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

Nested resources with `TabbedForm` with `syncWithLocation` enabled

未关闭
#9,211 4 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
30/100
Issue 类型
功能
描述清晰度
基本清楚
活跃度
停滞
技术栈
react, typescript
领域
frontend

调研方向

首先阅读 TabbedFormView 的实现,尤其是其对 syncWithLocation 路由的处理,并复现 issue 中嵌套 Resource 的场景。完成的标准是:TabbedForm 可以使用 syncWithLocation,同时导航到嵌套子 Resource 仍然可访问,而不是被 tab 路由捕获;issue 未指定测试文件。

由索引模型根据 Issue 内容生成。

描述

RFC

Is your feature request related to a problem? Please describe.
I'd like to use nested resources with <TabbedForm> and syncWithLocation enabled. This is not possible due to TabbedFormView using splat route:

{syncWithLocation ? (
    <Routes>
        <Route path="/*" element={renderTabHeaders()} />
    </Routes>
) : (
    renderTabHeaders()
)}

The scenario is as follows: I have an edit page for a resource. It renders a TabbedForm. On this edit page I'd like to navigate to a nested resource that is declared similar to this:

<Resource name="parent" edit={EditView}>
  <Route path=":id/child" element={<ChildView />} />
</Resource>

function EditView() {
  return (
    <Edit>
      <TabbedForm>
        <FormTab label="tab1" />
      </TabbedForm>
    </Edit>
}

Describe the solution you'd like
I'd like to be able to use nested resources and TabbedForm on a source view. This will be possible if we add some kind of prefix before splat route:

{syncWithLocation ? (
    <Routes>
        <Route path="/tabs/*" element={renderTabHeaders()} />
    </Routes>
) : (
    renderTabHeaders()
)}

Describe alternatives you've considered
Probably, as a workaround I can navigate to an intermediary view that does not have a splat route, so it doesn't catch the child view route:

navigate("/parent");
navigate("/parent/123/child");

Additional context

主要语言
TypeScript
星标
27k
派生
5.5k
平均合并
1 天 3 分钟
30 天内合并 PR
32

环境准备

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

marmelab/react-admin 的其他 Issue

查看 marmelab/react-admin 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。