javascript - react 路由器与嵌套的 child ？

Question

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

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

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

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

但是，对于 /sites/:id 路由，它不依赖于 Sites 组件。我会在 Sites 目录的同一级别创建另一个 Site 目录，还是让 Site 组件能够呈现列表和单一 View ？我的 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')))
  }
}