React router - pass đạo cụ trên các tuyến đường đến các thành phần con

Question

Ai đó có thể vui lòng cho tôi biết cách tốt nhất để làm điều này không? Tôi muốn vượt qua một tiêu đề trang prop từ tuyến đường của tôi vào thành phần con tiêu đề của tôi. Dưới đây là tuyến đường của tôi:

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

Tôi muốn vượt qua các tiêu đề của trang của tôi trong con đường như một chỗ dựa như thế này:

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

Để thành phần tiêu đề của tôi:

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

Nhưng các đạo cụ hiển thị như trống rỗng, bất cứ ai có thể giúp đỡ?

Answer 1

Hiện tại bạn không thể (trước 1.0) làm điều đó với Bộ định tuyến phản ứng. Tôi tin rằng một trong những cách đề nghị là phải có thành phần wrapper:

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

Sau đó, các đường bay:

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

Tuy nhiên có một cuộc thảo luận về chủ đề này trên React Router github issues cung cấp tin tức tốt:

Tôi chỉ muốn lưu ý ở đây rằng trong API mới (xem #1158) các tuyến đường là các đối tượng đơn giản, vì vậy bạn có thể đặt bất kỳ đạo cụ nào bạn muốn trên chúng. móc chuyển tiếp của bạn sẽ nhận được một tuyến đường arg và các thành phần sẽ nhận được this.props.route, vì vậy bạn nên tốt để đi.

Có vẻ như phiên bản 1.0 mới này đang trong giai đoạn thử nghiệm và sẽ sớm xuất hiện!

Answer 2

Tôi vừa gặp sự cố tương tự và tìm thấy this answer trong các vấn đề về GitHub của React Router.

Đề nghị chuyển số props thành thành phần Route và truy cập chúng từ thành phần với this.props.route.*.

Tôi chỉ sử dụng nếu cho ứng dụng của riêng tôi và thấy nó rất dễ sử dụng. (Đặc biệt dễ dàng hơn so với câu trả lời chấp nhận) Đây là ví dụ từ câu trả lời (nhờ 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')); 

Component:

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

Answer 3

Nếu bạn đang sử dụng ES6, sau đó nó cũng là khá tốt đẹp để inline một stateless functional component sử dụng ES6 arrow syntax .. .

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

Nếu thành phần xử lý của bạn quan tâm đến chuyển params hoặc một số khía cạnh khác của tuyến đường sau đó hãy chắc chắn để vượt qua xuống props.

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