Реагировать маршрутизатор - пропустить опоры на маршрутах к дочерним компонентам

Может кто-нибудь, пожалуйста, скажите мне лучший способ сделать это? Я хотел бы передать ссылку на заголовок страницы из моего маршрута в мой дочерний компонент заголовка. Вот мои маршруты:

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

Я хотел бы передать название моей страницы на маршруте в качестве профайла, подобного этому:

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

К моему компоненту заголовка:

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

Но реквизит отображается как пустой, может ли кто-нибудь помочь?

Ответы

Ответ 1

В настоящее время вы не можете (до 1.0) сделать это с помощью React Router. Я считаю, что один рекомендуемый способ - иметь компоненты оболочки:

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

Затем эти маршруты:

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

Однако обсуждение этой темы в проблемах Gitub React Router, которая дает хорошие новости:

Я просто хотел заметить здесь, что в новом API (см. # 1158) маршруты просто простые объекты, поэтому вы можете поместить любые реквизиты, которые вы хотите на них. Ваши переходные крючки получат маршрут arg, и компоненты получат this.props.route, поэтому вам должно быть хорошо идти.

Похоже, что новый выпуск 1.0 находится в стадии бета-тестирования, и поэтому он должен скоро появиться!

Ответ 2

У меня была одна и та же проблема и нашла этот ответ в проблемах Ritter Ritter GitHub.

Предлагается передать props компоненту Route и получить доступ к ним из компонента с помощью this.props.route.*.

Я просто использовал, если для своего приложения и считаю его очень простым в использовании. (Особенно легче, чем принятый ответ). Это пример из ответа (спасибо 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'));

компонент:

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

Ответ 3

Если вы используете ES6, то также неплохо встроить безстоящий функциональный компонент, используя Синтаксис стрелок ES6...

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

Если ваш компонент обработчика заботится о маршрутизированном params или каком-либо другом аспекте маршрута, то обязательно передайте props.

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