Router reagieren - Requisiten auf Routen an untergeordnete Komponenten weitergeben

Question

Kann mir bitte jemand den besten Weg sagen, dies zu tun? Ich möchte eine Seitentitel-Prop von meiner Route in meine Header-Kind-Komponente übergeben. Hier sind meine Routen:

var sampleApp= React.createClass({ 

render: function(){ 
    return (
     <div className="our-schools-app"> 
      <Header /> 
      <RouteHandler /> 
      <Footer /> 
     </div> 
    ); 
}, 

}); 

var routes = (
<Route name="app" path="/" handler={OurSchoolsApp}> 
    <DefaultRoute name="home" handler={HomePage} /> 
    <Route name="add-school" handler={AddSchoolPage} /> 
    <Route name="calendar" handler={CalendarPage} /> 
    <Route name="calendar-detail" path="calendar-detail/:id" handler={CalendarDetailPage} /> 
    <Route name="info-detail" path="info-detail/:id" handler={InfoDetailPage} /> 
    <Route name="info" handler={InfoPage} /> 
    <Route name="news" handler={NewsListPage} /> 
    <Route name="news-detail" path="news-detail/:id" handler={NewsDetailPage} /> 
    <Route name="contacts" handler={ContactPage} /> 
    <Route name="contact-detail" handler={ContactDetailPage} /> 
    <Route name="settings" handler={SettingsPage} /> 
</Route> 
); 


Router.run(routes, function(Handler){ 
var mountNode = document.getElementById('app'); 
React.render(<Handler /> , mountNode); 
}); 

Ich möchte den Titel meiner Seite in der Route als Stütze wie dies passieren:

<Route name="info" handler={InfoPage} pageTitle="Info Page" /> 

Zu meiner Header-Komponente:

var Header = React.createClass({ 

render: function() { 
    return (
      <div className="bar bar-header" 
       style={this.getStyle()}> 
       <HomeButton /> 
       <div className="h1 title">{this.props.pageTitle}</div> 
      </div> 
    ) 
} 
}); 

Aber die Requisiten zeigen sich als leer, kann jemand helfen?

Answer 1

Sie können dies derzeit nicht (vor 1.0) mit React Router tun. Ich glaube, eine empfohlene Weg ist Wrapper Komponenten haben:

var BaseComponent = React.createClass({ 
    render: function() { 
     return <p>{this.props.text}</p> 
    } 
}); 

var FancyComponent = React.createClass({ 
    return <BaseComponent text="fancy!" /> 
}); 

var EvenFancierComponent = React.createClass({ 
    return <BaseComponent text="SUPER fancy!" /> 
}); 

dann diese Routen:

<Route name="standard" handler={BaseComponent} /> 
<Route name="fancy" handler={FancyComponent} /> 
<Route name="superfancy" handler={EvenFancierComponent} /> 

Allerdings gibt es eine Diskussion zu diesem Thema auf der React Router github issues die gute Nachricht lautet:

Ich wollte hier nur anmerken, dass in der neuen API (siehe #1158) die Routen nur einfache Objekte sind, so dass Sie die gewünschten Requisiten darauf setzen können. Ihre Übergangshaken erhalten eine Route arg und Komponenten erhalten this.props.route, so sollten Sie gut zu gehen.

Es sieht so aus, als ob die neue Version 1.0 in der Beta ist und so sollte bald kommen!

Answer 2

Ich hatte gerade das gleiche Problem und this answer im React Router GitHub Probleme gefunden.

Es schlägt vor, die props an die Route Komponente zu übergeben und auf sie von der Komponente mit this.props.route.* zuzugreifen.

Ich habe nur für meine eigene Anwendung verwendet und finde es sehr einfach zu bedienen. (Besonders einfacher als die akzeptierte Antwort) Dies ist das Beispiel aus der Antwort (dank anjdreas):

Routing:

React.render((
    <Router> 
    <Route path="/" component={RootComp} myprop="foo"> 
     <Route path="foo" component={FooComp}> 
      <Route path="bar" component={BarComp} /> 
     </Route> 
    </Route> 
    </Router> 
), document.getElementById('example')); 

Komponente:

class RootComp extends React.Component { 
    render: { 
     this.props.route.myprop // == "foo" 
    } 
} 

Answer 3

Wenn Sie verwenden ES6, dann ist es auch sehr schön, eine stateless functional component mit ES6 arrow syntax zu inline. .

<Route name="info" handler={()=> <InfoPage pageTitle="Info Page" />} /> 

Wenn Ihre Handler Komponente über geroutet pflegt die props zu überliefern params oder ein anderer Aspekt der Strecke dann sicher sein.

<Route name="info" handler={(props)=> <InfoPage pageTitle="Info Page" {...props} /> } />