Router mit verschachtelten Kindern reagieren?

Question

Mit Blick auf die huge-apps Beispiel auf dem React-Router Github, bin ich mir nicht sicher, wie Sie die Routen, die ich will.

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

Wenn ich mehrere Websites auflisten möchten, die Site-Komponente/Route müssten in der Seiten-Komponente/route verschachtelt werden. Daher würde meine Ordnerstruktur dem Zuweisungsmodell im Beispiel des reaktiven Routers ähneln.

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

jedoch für die /sites/:id Route ist es nicht abhängig von den Seiten-Komponente. Würde ich ein anderes Site-Verzeichnis auf derselben Ebene im Sites-Verzeichnis erstellen oder würde ich die Site-Komponente in die Lage versetzen, eine Liste und eine einzelne Ansicht darzustellen? Wie würden meine index.js Dateien aussehen?

Answer 1

ich Ihre Route Baum auf diese Weise sichtbar machen würde:

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

In Ihrem index.js, so etwas wie diese (unter Verwendung eines clientseitigen Beispiel):

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

Jede Route hat eine Begleit Komponente. Sie können alles, was Sie wollen, in diese Komponenten werfen, obwohl es wahrscheinlich hilfreich wäre, eine Möglichkeit hinzuzufügen, um zu untergeordneten Routen zu navigieren.

PlainRoute Version (obwohl ich nicht sicher bin, warum Sie wollen würde zu):

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' :

Answer 2

Wenn ich richtig verstehe, was Sie versuchen, erreichen Sie so etwas wie dies in Ihrem Router tun könnte:

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

Wo die SingleSite Komponente die ID param nimmt und verwendet sie die Seite angezeigt werden soll. React Router sollte in der Lage sein, die SingleSite-Komponente zu verwenden, wenn eine ID vorhanden ist, und die Sites-Komponente anzuzeigen, falls dies nicht der Fall ist.