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

Posted 2023-02-21

【中文标题】react-router 未渲染的嵌套详细信息路由

【英文标题】：Nested details route with react-router not rendering

【发布时间】：2014-12-15 23:09:15

【问题描述】：

我正在使用 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？

【参考方案1】：

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

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

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

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

<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 集成）。但是，根据 *** 规则，恐怕我一次只能回答一个问题。因此，如果您创建一个单独的问题，我很乐意提供答案。

【讨论】：

第一：永远不要在 *** 中编辑代码块，语法混乱不在我的原始代码中第二：它没有反斜杠第三：你是对的，每个问题一个问题：D 第四：“相当简单" 成功了，this.activeRouteHandler(props) 当然也可以嵌套使用 :) 第五：谢谢！

感谢您的 cmets！为了未来的读者，我想澄清一下，它可能是它没有工作的路径反斜杠，而不是子嵌套 <Route/> 末尾的那个，因为结束标记在 JSX 中是绝对必要的（并且任何其他 XML 方言）。是的，你用this.activeRouteHandler() 得到了它。我不确定你到底是怎么做的，但我的建议是将集合作为道具传递，然后使用 URL 中的 id 作为索引从集合中获取模型（this.props.collection.get(this.props.params.id) 应该可以，我认为）。

我认为您的意思只是“斜杠”或“正斜杠”。反斜杠是“\”，这不是你在说的。

谢谢@PaulFerrett，你是对的。想想我有多少次不耐烦地向非技术家庭成员和同事解释不同之处，我感到很尴尬，尽管多次重新阅读这个问题，我还是错过了这个错误。感谢您指出我的回答中的一个重大错误。