react-router 未渲染的嵌套详细信息路由

Question

我正在使用 react-router 插件来设置我的路由 我想提供两条路线list/ 和list/:id（很常见） 我所拥有的和正在工作的是：

<Routes>
    <Route handler={App}>
        <Route name="list"
            handler={ListComponent}
            collection={new Collection()}>
        </Route>
    </Route>
</Routes>

但我正在努力让我的“详细信息”路线发挥作用。我尝试的是：

<Routes>
    <Route handler={App}>
        <Route name="list"
            handler={ListComponent}
            collection={new Collection()}>
            <Route name="list.details"
                path="list/:id"
                handler={DetailsComponent}>
        </Route>
    </Route>
</Routes>

首先，这目前不起作用，我的DetailsComponent 在访问 list/123 时没有呈现（例如）

其次，即使这可行：我将如何管理将我收藏中的一个模型“向下”传递给DetailsComponent？

Answer 1

要回答您的第一个问题，您的路由器代码有两个问题。巧合的是，正斜杠是这两个问题的答案：

1. 您需要关闭所有Route 组件。如果你自己写一个<Route>，你必须包括这样的结束标签：<Route/>。

2. 您可能需要在列表路径的开头使用正斜杠。

所以你的代码应该是这样的：

<Routes>
    <Route handler={App}>
        <Route name="list"
            handler={ListComponent}
            collection={new Collection()}>
            <Route name="listDetails"
                path="/list/:id"
                handler={DetailsComponent}/>
        </Route>
    </Route>
</Routes>

另外，为了清楚起见，路由名称只是一个字符串标识符。我不确定你是否写了list.details 作为对象访问器来访问你的模型，但如果是这样，它不会像你想象的那样做。我将名称更改为 listDetails 以避免任何混淆，但 list.details 也是一个有效的字符串标识符，因此如果您愿意，请随时将其改回。

这解决了您在此处提供的块中的代码问题。在没有看到 DetailsComponent 组件和/或任何错误消息的情况下，我无法确定是否还有其他问题。

关于您的第二个查询，该解决方案相当简单（尽管react-router 没有您可能希望在这里的 Backbone 集成）。但是，根据 StackOverflow 规则，恐怕我一次只能回答一个问题。因此，如果您创建一个单独的问题，我很乐意提供答案。