嵌套详细信息路由，反应路由器无法呈现 [英] Nested details route with react-router not rendering

问题描述

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

I am using the react-router plugin to setup my routes I want to provide two routes list/ and list/:id (pretty common) What I have and what's working is this:

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

但我正在努力让我的细节路线开始工作。我尝试的是：

But I am struggling to get my "details" route to work. What I tried is:

<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时没有呈现（例如）

First, this is not working currently, my DetailsComponent is not rendered when accessing list/123 (e.g.)

其次，即使这样可行：我如何管理我的集合中的一个模型向下到 DetailsComponent ？

Second, even if this would work: how would I manager to pass one model in my collection "down" to the DetailsComponent?

推荐答案

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

To answer your first question, there are two issues with your router code. Coincidentally, a forward slash is the answer to both issues:

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

1. You need to close all your Route components. If you write a <Route> by itself, you must include the closing tag like this: <Route/>.

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

You likely need a forward slash at the start of your list path.

因此，您的代码应如下所示：

So your code should look something like:

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

Also, just to be clear, the route name is just a string identifier. I'm not sure if you wrote list.details as an object accessor to get to your model, but if so, it's not going to do what you think it will. I changed the name to listDetails to avoid any confusion, but list.details is also a valid string identifier so feel free to change it back if you'd like.

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

That resolves the code issues in the block you provided here. Without seeing the DetailsComponent component and/or any error messages, I can't say for sure if there are any other issues.

关于你的第二个查询，解决方案相当简单（虽然 react-router 没有你可能希望的Backbone集成）。但是，我担心我只能根据StackOverflow规则一次回答一个问题。如果你创建一个单独的问题，我很乐意提供答案。

Regarding your second query, the solution is fairly straightforward (although react-router does not have the Backbone integration that you might be hoping for here). However, I'm afraid I'm only permitted to answer one question at a time according to StackOverflow rules. So I'd be happy to provide an answer if you create a separate question.

这篇关于嵌套详细信息路由，反应路由器无法呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！