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

IT技术 javascript html reactjs react-router url-routing
2021-05-06 22:00:00

我正在使用 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个回答

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

  1. 您需要关闭所有Route组件。如果你自己写 a <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 规则，我一次只能回答一个问题。因此，如果您创建一个单独的问题，我很乐意提供答案。

其它你可能感兴趣的问题
上一篇更改材料表react中“动作”的样式 下一篇Ant 设计日期和时间选择器不会通过 Formik (react) 传递值