title: React - Pass and Read Props to Inner Components
body: <p>I found my self working with a react template and route.
  I am not able to pass props to inner component in order to change page title.</p>
  
  <p>Route are defined as below in the template a I <strong>added</strong> "<em>title</em>" props for each routes in order to pass to inner components.</p>
  
  <pre><code>const loadable = loader =&gt;
    Loadable({
      loader,
      delay: false,
      loading: () =&gt; null,
    })
  
  const loadableRoutes = {
    '/registration': {
         component: loadable(() =&gt; import('sm-pages/RegistrationPage')),
         title : "Registration"
    },
  
    '/registrationSuccess': {
          component: loadable(() =&gt; import('sm-pages/RegistrationPage')),
          title : "Registration Success"
     },
  
    ...
  
    render() {
      return (
        &lt;ConnectedSwitch&gt;
          &lt;Route exact path="/" component={HomePage} /&gt;
          {Object.keys(loadableRoutes).map(path =&gt; {
            const { exact, ...props } = loadableRoutes[path]
            props.exact = exact === void 0 || exact || false // set true as default
            return &lt;Route key={path} path={path} {...props} /&gt;
          })}
          &lt;Route
            render={() =&gt; (
              &lt;Page&gt;
                &lt;NotFoundPage /&gt;
              &lt;/Page&gt;
            )}
          /&gt;
        &lt;/ConnectedSwitch&gt;
      )
    }
  </code></pre>
  
  <p>The template has differents inner components and at some point it render my component as below:</p>
  
  <pre><code>render() {
      const { getContentBuffer } = this.context
      const { pathName, content } = getContentBuffer()
      return isEmpty(content) ? (
        &lt;div className="utils__loadingPage" /&gt;
      ) : (
        &lt;div className="utils__content"&gt;
          &lt;Breadcrumb name={pathName} /&gt;
          {content}
        &lt;/div&gt;
      )
    }
  </code></pre>
  
  <p>I access to props (without success) in my component in this way:</p>
  
  <pre><code> render() {  
      const props = this.props
      return (        
          &lt;h1&gt;{this.props.title}&lt;/h1&gt;
      )
    }
  </code></pre>
  
  <p>How I have to change in order to access to title props?</p>
  
  <p>Thanks in advance</p>