javascript - react 路由器不呈现的嵌套详细信息路由

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也是一个有效的字符串标识符，因此如果您愿意，可以随时将其改回。

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

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