Question

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

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组件能够呈现列表和单个视图？我的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')
);

” ./路由/站点：

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')))
  }
}

'./路由/站点'：

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组件，如果没有，则显示Sites组件。

React路由器与嵌套子项？

2 个答案: