Render content if on index route React JS
<p>Using react router and currently trying to render some content only if I'm on the index route <code>"/"</code> and other content for anything else than that.</p>

<p>This is what I came up with so far, no errors show up, but it doesn't seem to play well with the code.</p>

<pre><code>var renderContent = function() {
    return (
        &lt;div className="contain"&gt;
            {this.props.sidebar}
            &lt;div className="page"&gt;
                {this.props.main}
            &lt;/div&gt;
        &lt;/div&gt;
    )
}

var renderHomepage = function() {
    return (
         &lt;div className="homepage"&gt;
             {this.props.main}
         &lt;/div&gt;
    );
}

var toRender = function() {
    if (this.props.path == '/') {
        {this.renderHomepage()}
    } else {
        {this.renderContent()}
    }
}
</code></pre>

<p>then beneath that I continue with:</p>

<pre><code>export default React.createClass({
 render() {
   return(
     &lt;div&gt;
       &lt;div className="main-content"&gt;
         {toRender}
 ...
</code></pre>

<p>Nothing seems to render at all on any route. Any ideas?</p>

<p><strong>Edit:</strong></p>

<pre><code>...

import Home from './Home'

module.exports = (
    &lt;Route path="/" component={App}&gt;
        &lt;IndexRoute component={Home}/&gt;
        &lt;Route path="design" component={{main: deMain, header: deHeader, sidebar: sbAnimations}}&gt;
           &lt;Route path="scheme" component={deScheme}/&gt;
        &lt;/Route&gt;
    &lt;/Route&gt;
)
</code></pre>

<p>where my <code>Home</code> component looks like this:</p>

<pre><code>import React from 'react'

export default React.createClass({
    render() {
        return (
            &lt;div className="hero"&gt;
            &lt;/div&gt;
        )
    }
})
</code></pre>