嵌套的带有react路由器的详细信息路由未呈现

Nested details route with react-router not rendering

本文关键字：路由 详细信息 路由器 react 嵌套      更新时间：2023-09-26

我正在使用react路由器插件来设置我的路由我想提供两条路线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在访问列表/123（例如）时没有呈现

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

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

  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没有您可能希望的主干集成）。但是，根据StackOverflow规则，我恐怕一次只能回答一个问题。因此，如果你提出一个单独的问题，我很乐意提供答案。

相关文章：