带有嵌套子级的反应路由器？

Question

查看 react-router github 上的 huge-apps 示例，我不确定如何设置我想要的路由。

URL        | Result
--------------------------
/sites     | List of sites
/sites/:id | One site

如果我想列出多个站点，站点组件/路由需要嵌套在站点组件/路由中。因此，我的文件夹结构看起来类似于 react-router 示例中的分配模型。

/routes
    /Sites
        /components
        |   Sites.js
        /routes
        |   /Site
        |   |   /components
        |   |   |   Site.js
        |   |   index.js
        index.js

但是，对于/sites/:id 路由，它不依赖于站点组件。我会在 Sites 目录的同一级别上创建另一个 Site 目录，还是让 Site 组件能够呈现列表和单一视图？我的 index.js 文件会是什么样子？

Answer 1

我会以这种方式可视化您的路线树：

/sites
(Sites.js)
- /:id1
  (Site1.js)
- /:id2
  (Site2.js)

在您的 index.js 中，类似这样的内容（使用客户端示例）：

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home} />
      <Route path="/sites" component={Sites}>
        <Route path="/sites/:id" component={Site}/>
      </Route>
    </Route>
  </Router>
), document.getElementById('app'));

每条路线都有一个附带的组件。你可以在这些组件中添加任何你想要的东西，尽管包含一些导航到子路由的方法可能会有所帮助。

PlainRoute 版本（虽然我不确定你为什么想要）：

const rootRoute = {
  component: 'div',
  childRoutes: [{
    path: '/',
    component: require('./components/App'),
    childRoutes: [ require('./routes/Sites') ]
  }]
}

render(
  <Router history={browserHistory} routes={rootRoute} />,
  document.getElementById('example')
);

'./routes/Sites'：

module.exports = {
  path: 'sites',
  getChildRoutes(location, cb) {
    require.ensure([], (require) => cb(null, [ require('./routes/Site') ]))
  },
  getComponent(nextState, cb) {
    require.ensure([], (require) => cb(null, require('./components/Sites')))
  }
}

'./routes/Site':

module.exports = {
  path: 'sites/:id',
  getComponent(nextState, cb) {
    require.ensure([], (require) => cb(null, require('./components/Site')))
  }
}

Answer 2

如果我正确理解您想要实现的目标，您可以在路由器中执行以下操作：

<Route path="/sites/:id" component={SingleSite} />
<Route path="/sites" component={Sites} />

SingleSite 组件采用 id 参数并使用它来显示站点。如果有 ID，React 路由器应该能够使用 SingleSite 组件，如果没有 ID，则显示 Sites 组件。