Question

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

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

但我正在努力获得我的＆＃34;细节＆＃34;上班路线。我试过的是：

<Routes>
    <Route handler={App}>
        <Route name="list"
            handler={ListComponent}
            collection={new Collection()}>
            <Route name="list.details"
                path="list/:id"
                handler={DetailsComponent}>
        </Route>
    </Route>
</Routes>

首先，这当前不起作用，访问list / 123时没有呈现我的DetailsComponent（例如）

其次，即使这样可行：我如何经理在我的收藏中传递一个模型＆＃34; down＆＃34;到DetailsComponent？

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

嵌套详细信息路由，反应路由器不呈现

1 个答案: