Реагировать this.props.title является нулевым !!Зачем?

Question

у меня 3 состояние (статус, звание, танец)

Я использую реагирующий маршрутизатор, реагирующий переключатель, React.cloneElement.

App.jsx

   var React = require('react');
    var io = require('socket.io-client');
    var Router = require('react-router');
    var RouteHandler = require('react-router').RouteHandlerl;
    var Header = require('./parts/Header');
    module.exports =  class App extends React.Component {
      constructor(){
        super();

        this.state = {
          status: 'disconnected',
          title:'no Tile',
          dance: 'dance'
      };
      }

        render() {
              return (
                <div>
                  <Header title={this.state.title} status={this.state.status }  />
                  {React.cloneElement(this.props.children,this.state)} 
                  </div>
              );
            }
          }

и хочет провести состояние (название) в аудитории!

Проблема в том, что this.props.title имеет значение null Почему? Обязательный this.props.title == 'нет плитки'

Audience.jsx

var React = require('react');

    module.exports =  class Audience extends React.Component {

        render(){// this.props.title is null ???
            return (<h1>Audience : {this.props.title}</h1>);
        }
    }

Запустить в приложении-клиенте

приложение-client.jsx

  var React = require('react');
    var Router = require('react-router-dom');
    var BrowserRouter = require('react-router-dom').BrowserRouter;
    var Route = require('react-router-dom').Route;
    var Switch = require('react-router-dom').Switch;
    var ReactDOM = require("react-dom");
    var App = require("./components/APP");
    var Audience = require("./components/Audience");


     class Run extends React.Component {

        render(){
            return( 
            <BrowserRouter  >
                <Switch title={this.props.title} > 
                    <Route  path="/" component={Audience}   title={this.props.title} />

               </Switch>
           </BrowserRouter>
           );
        }
    }


        ReactDOM.render( 
       <App >
            <Run  />
        </App>
       ,
        document.getElementById('react-container')
);

Answer 1

Поскольку компонент Маршрут не передает реквизиты к соответствующему компоненту.Попробуйте что-то вроде этого:

<Route  path="/" render={() => <Audience title={this.props.title} />} />

Также Ознакомьтесь с другими примерами из документации о реагирующих маршрутизаторах.