Question

我的网站上有很少的普通网页和一个包含Google地图的网页。单击地图标记时，地图旁会显示带有标记详细信息的面板。此详细信息具有自己的URL，以便用户可以链接到它：

<Route path="/" component={App}>
    <IndexRoute component={Welcome} />
    <Route path="map" component={Map}>
        {/* Detail is a child component of Map,
            it only adds detail panel markup to Map.  */}
        <Route path="detail/:id" component={Detail} /> 
    </Route>
    <Route path="about" component={About} />
</Route>

这很好用。但是，让我们摆脱欢迎页面并在网络根目录上显示 Map ，以便： /呈现App > Map个组成部分 /detail/:id呈现App > Map > Detail个组成部分 /about呈现App > About个组件

<Route path="/" component={App}>
    {/* Map has to be IndexRoute so that it is displayed at root URL. */}
    <IndexRoute component={Map}>
        <Route path="detail/:id" component={Detail} /> 
    </IndexRoute>
    <Route path="about" component={About} />
</Route>

但这不起作用，因为IndexRoute can't have subroutes。

这是我找到的最佳解决方案：

<Route path="/" component={App}>
    <Route component={Map}>
        <IndexRoute component={EmptyComponent} />
        <Route path="detail/:id" compoent={Detail} />
    </Route>
    <Route path="about" component={About} />
</Route>

但我不喜欢空组件。

我错过了什么吗？我做的事情不寻常吗？为什么不能以第一种更直观的方式做到这一点？

Answer 1

移动/路径

<Route component={App}>
  <Route path="/" component={Map}>
    <Route path="detail/:id" component={Detail}/>
  </Route>
  <Route path="/about"/>
</Route>

Answer 2

您的解决方案对我来说看起来很好 - 唯一需要注意的是，在这种情况下您不需要指定组件;只需<IndexRoute />。

按照设计，索引路由终止匹配，但很容易插入普通路由。

Answer 3

也许我错了，但似乎你试图设置另一条路线：

<IndexRoute component={Map}>
   <Route path="detail/:id" component={Detail} /> 
</IndexRoute>

所以你的基本结构是这样的：

<IndexRoute> <Route> </Route> </IndexRoute>

根据您的错误，您的<Route>内部不允许<IndexRoute> ...一开始您没有犯错，因为您之前关闭了<IndexRoute>你打开了下一个<Route> - 标签。

因此，如果您希望代码再次运行，则不应在<Route>内打开另一个<IndexRoute>。您设法通过添加Dummy-IndexRoute来解决此问题。因此，如果您要将Map组件设置为IndexRoute，则必须更改HTML结构，以便地图组件中没有Detail组件，因为那样您将再次遇到同样的问题，即内部有<Route>你的<IndexRoute>

IndexRoute子路由

3 个答案: