src-routes-index.js

//src/routes/index.js

import CoreLayout from '../layouts/CoreLayout/CoreLayout'
import Dashboard from './Dashboard'

export const createRoutes = (store) => ({
  path        : '/',
  component   : CoreLayout,
  indexRoute  : Dashboard,
  getChildRoutes (location, cb) {
    require.ensure([], (require) => {
      cb(null, [
        require('./Transactions').default(store)
      ])
    })
  }
})

export default createRoutes

src-routes-Transactions-components-Transactions.js

// src/routes/Transactions/components/Transactions.js

import React, { Component } from 'react'
import { LinkContainer } from 'react-router-bootstrap'
import {
  ... // Removed to save space
} from 'react-bootstrap';

import Receipts from '../routes/Transactions/components/Receipts'
import Charges from '../routes/Transactions/components/Charges'


class Transactions extends Component {

  constructor(props) {
    super(props)
    this.props.fetchTransactions(42); // test value
    console.log(this);
    console.log(this.props);
  }

  render() {
    return (
      <Tab.Container id="left-tabs-example" defaultActiveKey="second">
        <Row className="clearfix">
          <Col sm={4}>
            <Nav bsStyle="pills" stacked>
              <LinkContainer to="/transactions/charges">
                <NavItem eventKey="first">
                  Charges
                </NavItem>
              </LinkContainer>
              <LinkContainer to="/transactions/receipts">
                <NavItem eventKey="second">
                  Receipts
                </NavItem>
              </LinkContainer>
            </Nav>
          </Col>
		      <Col sm={8}>
			      <Tab.Content animation>
			        <Tab.Pane eventKey="first">
                <Receipts /> // Want content from Receipts component along with it's props & state from connect() in `src/routes/Transactions/routes/Receipts/containers/Receipts.js` 
			        </Tab.Pane>
			        <Tab.Pane eventKey="second">
                <Charges /> // Same as receipts
			        </Tab.Pane>
			      </Tab.Content>
		      </Col>
        </Row>
      </Tab.Container>
    )
  }
}

export default Transactions

src-routes-Transactions-containers-TransactionContainer.js

// src/routes/Transactions/containers/TransactionContainer.js

import { connect } from 'react-redux'
import { fetchTransactions } from '../modules/transactions'

import Transactions from '../components/Transactions'


const mapDispatchToProps = {
  fetchTransactions: (userid) => fetchTransactions(userid)
}

const mapStateToProps = (state) => ({
  transactions: state.transactions
})

export default connect(mapStateToProps, mapDispatchToProps)(Transactions)

src-routes-Transactions-index.js

// src/routes/Transactions/index.js

import { injectReducer } from '../../store/reducers'

export default (store) => ({
  path : 'transactions',
  getChildRoutes (location, cb) {
    require.ensure([], (require) => {
      cb(null, [
        require('./routes/Charges').default(store),
        require('./routes/Receipts').default(store)
      ])
    })
  },

  getComponent (nextState, cb) {
    require.ensure([], (require) => {
      const Transactions = require('./containers/TransactionsContainer').default
      const reducer = require('./modules/transactions').default

      injectReducer(store, { key: 'transactions', reducer })

      cb(null, Transactions)

    }, 'transactions')
  }
})

src-routes-Transactions-routes-Receipts-components-Receipts.js

// src/routes/Transactions/routes/Receipts/components/Receipts.js

import React, { Component } from 'react'
import {
} from 'react-bootstrap';


class Receipts extends Component {

  constructor(props) {
    super(props)
    console.log(this); // no props (even those injected from connect())
  }

  render() {
    return (<div>RECEIPTS!</div>)
  }
}



export default Receipts

src-routes-Transactions-routes-Receipts-containers-Receipts.js

// src/routes/Transactions/routes/Receipts/containers/Receipts.js

import { connect } from 'react-redux'
import { fetchReceipts } from '../modules/receipts'

import Receipts from '../components/Receipts'

const mapDispatchToProps = {
  fetchReceipts: (userid) => fetchReceipts(userid)
}

const mapStateToProps = (state) => ({
  receipts: state.receipts
})

export default connect(mapStateToProps, mapDispatchToProps)(Receipts)

src-routes-Transactions-routes-Receipts-index.js

// src/routes/Transactions/routes/Receipts/index.js

import { injectReducer } from '../../../../store/reducers'

export default (store) => ({
  path : 'receipts',
  
  getComponent (nextState, cb) {
    require.ensure([], (require) => {
      const Receipts = require('./containers/ReceiptsContainer').default
      const reducer = require('./modules/receipts').default

      injectReducer(store, { key: 'receipts', reducer })

      cb(null, Receipts )

    }, 'receipts')
  }
})