React router - passare oggetti di scena su percorsi a componenti secondarie

Question

Qualcuno può dirmi per favore il modo migliore per farlo? Vorrei passare un puntello del titolo della pagina dal mio percorso nel mio componente figlio di intestazione. Qui sono le mie vie:

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

vorrei passare il titolo della mia pagina nel percorso come un oggetto di scena come questa:

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

Per la mia componente intestazione:

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

Ma i puntelli mostrano come vuoto, qualcuno può aiutare?

Answer 1

Attualmente non è possibile (pre 1.0) farlo con React Router. Credo che un metodo consigliato è quello di avere componenti avvolgitore:

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!" /> 
}); 

Poi questi percorsi:

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

Tuttavia c'è un dibattito su questo argomento sul React Router github issues che fornisce una buona notizia:

Volevo solo notare che nella nuova API (vedi #1158) i percorsi sono solo oggetti semplici, quindi puoi inserire qualsiasi oggetto di interesse che desideri. I tuoi hook di transizione avranno un argomento di percorso e i componenti riceveranno this.props.route, quindi dovresti essere a posto.

Sembra che la nuova versione 1.0 sia in versione beta e quindi dovrebbe arrivare presto!

Answer 2

Ho appena avuto lo stesso problema e ho trovato this answer nei problemi di GitHub di React Router.

Suggerisce di passare il props al componente Route e accedervi dal componente con this.props.route.*.

Ho appena usato se per la mia applicazione e lo trovo molto facile da usare. (Soprattutto più facile che la risposta accettata) Questo è l'esempio dalla risposta (grazie a 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')); 

Componente:

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

Answer 3

Se stai usando ES6, quindi è anche piuttosto carino inserire in linea un stateless functional component usando ES6 arrow syntax .. .

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

Se il componente gestore si preoccupa instradato params o di qualche altro aspetto del percorso poi essere sicuri di passare lungo il props.

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