Реактивный маршрутизатор с вложенными детьми?

Question

Глядя на пример huge-apps на github response-router, я не уверен, как настроить маршруты, которые я хочу.

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

Если я хочу перечислить несколько сайтов, компонент/маршрут сайта должен быть вложен в компонент/маршрут Сайты. Таким образом, моя структура папок будет похожа на модель Assignments в примере action-router.

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

Однако для /sites/:id маршрута, он не зависит от компонента Sites. Смогу ли я создать еще один каталог сайта на том же уровне в каталоге «Сайты», или я могу заставить компонент сайта отображать список и уникальный вид? Как выглядят мои файлы 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 компонент принимает параметры идентификатора и использует его для отображения сайта. React router должен иметь возможность использовать компонент SingleSite, если есть идентификатор, и показать компонент Sites, если нет.