How to send props to sub routed-component with React-Router and React-Redux?
<p>I'm creating website with React + React-Router and React-redux. This is my store and reducer:</p>



<pre class="lang-jsx prettyprint-override"><code>const defaultState = {
    posts: [{key:0, title: 'Default post', text: 'Every visitor is welcome!'}]
};

const store = createStore(
    (state = defaultState, action) =&gt; {
        switch(action.type) {
            default:
                return state;
        }
    }
);
</code></pre>

<p>i don't have any action yet, i will add it later. however, back to the point, this is App Component which is entry point of React App.</p>

<pre class="lang-jsx prettyprint-override"><code>const App = React.createClass({
    render() {

        return (
            &lt;div&gt;
                &lt;h1&gt;React Router + Redux Blog&lt;/h1&gt;

                &lt;ul&gt;
                    &lt;li&gt;&lt;IndexLink to="/"&gt;Main&lt;/IndexLink&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;Link to="/about"&gt;About&lt;/Link&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;Link to="/posts"&gt;Posts&lt;/Link&gt;&lt;/li&gt;
                &lt;/ul&gt;

                {this.props.children}
            &lt;/div&gt;
        );
    }
});
</code></pre>

<p>and this App component will connect with Redux-Router's connect method:</p>

<pre class="lang-jsx prettyprint-override"><code>const ConnectedApp = connect( (state) =&gt; {
    return {
        posts: state.posts
    };
})(App);
</code></pre>

<p>now, the last, i will give Router component instead of ConnectedApp inside of Provider, and use ConnectedApp as index component.</p>

<pre class="lang-jsx prettyprint-override"><code>ReactDOM.render(
    &lt;Provider store={store}&gt;
        &lt;Router history={browserHistory}&gt;
            &lt;Route path="/" component={ConnectedApp}&gt;
                &lt;IndexRoute component={Main} /&gt;
                &lt;Route path="about" component={About} /&gt;
                &lt;Route path="posts" component={Posts} &gt;
                    &lt;IndexRoute component={PostsMain} posts={[]} /&gt;
                    &lt;Route path="write" component={PostsWrite} /&gt;
                &lt;/Route&gt;
            &lt;/Route&gt;
        &lt;/Router&gt;
    &lt;/Provider&gt;,
    document.getElementById('app')
);
</code></pre>

<p>now, this is the problem. i want to send Redux Store states into sub component(PostsMain or PostsWrite) as Props, but i don't know how to pass it. every sub component might be rendered is decided by React Router, and each component doesn't have any stored state by Redux.</p>

<p>I saw some modules like React-Router-Redux, Redux-Router, but I want to do it without them. If someone knows how to do it, please gimme advice and that will be very appreciated.</p>