React路由器與嵌套的孩子？

看看react-router github上的huge-apps示例，我不知道如何設置我想要的路由。React路由器與嵌套的孩子？

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路由，它不依賴於站點組件。我會在「網站」目錄的同一級別創建另一個「網站」目錄嗎？還是讓「網站」組件能夠呈現列表和單一視圖？我的index.js文件會是什麼樣子？

來源

2016-04-19 GreeKatrina

我會想象你的路由樹是這樣的：

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

來源

2016-04-19 18:11:22

您如何對PlainRoutes進行此操作，示例如何？ – GreeKatrina

在可讀性方面，當JSX更高效時，我不知道爲什麼要使用PlainRoutes。根據示例中使用的文件結構，我將在PlainRoutes版本中追加到最初的答案。 –

正如你可以看到[這裏]（https://github.com/reactjs/react-router/blob/master/examples/huge-apps/app.js），它更適合代碼分割。無論如何，先謝謝你。 – GreeKatrina

如果我理解你想達到什麼樣正確的，你可以做你的路由器裏是這樣的：

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

凡SingleSite組件佔用的ID PARAM，並用它來顯示網站。如果有ID，React路由器應該能夠使用SingleSite組件，如果沒有，則顯示Sites組件。

來源

2016-04-19 18:03:29

當您映射/創建每個站點時，您是否可以通過站點組件將一個道具傳遞給站點組件？ – GreeKatrina

我想這取決於您是否希望「Site」組件顯示爲「Sites」組件的子項或不顯示。我認爲，因爲你不想同時顯示列表和個人網站，最好讓他們的兄弟姐妹在與所有網站都有對象的父母身上。 'Sites'將遍歷該對象並顯示所有內容，'Site'將在react路由器的params道具中接收'：id'，然後過濾從父路由傳遞的道具。 –

這是有道理的。我猜想在一個組件中使它更像MVC中的模型而不是組件。是否有必要先把更深的路徑？例如，將'/ sites /：id'放在'/ sites'路由之後會導致'/ sites /：id'永遠不會被渲染？ – GreeKatrina

React路由器與嵌套的孩子？

回答

相關問題