Why am I getting 'TypeError: Cannot read property 'props' of undefined' (react-router, React-Redux)?

Question

I first started working on this with the following, 'HomePage.js' as the only smart component:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import actions from '../redux/actions'

import AppFloatBar from './AppFloatBar'
import MainCoverPhoto from './MainCoverPhoto'
import FirstPage from '../pages/FirstPage'

import { deepOrange500, grey400 } from 'material-ui/styles/colors'

import getMuiTheme from 'material-ui/styles/getMuiTheme'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme'


const muiTheme = getMuiTheme(
  darkBaseTheme,
  {
    palette: {
      accent1Color: deepOrange500,
      textColor: grey400,
      textColor2: grey400,
    },
    appBar:{
      height: 67,
      color:'black',
      textColor:'#A0A0A0',
    },
  }
);

class HomePage extends Component {

  render() {
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <div>
          <AppFloatBar
            actions={this.props.actions}
            floatBar={this.props.floatBar}
          />
          <MainCoverPhoto/>
          <div className="thread_body">
            {(() => {
              switch (this.props.children.props.route.path) {
                case 'Page 1':
                  return <FirstPage addTodo={this.props.actions.addTodo}    actions={this.props.actions}
                  todos={this.props.todos}
                  inputTexts={this.props.inputTexts}
                  />
                case 'Page 2':
                  return this.props.children
                case 'Page 3':
                  return this.props.children
                default:
                  return this.props.children
              }
            })()}
          </div>
        </div>
      </MuiThemeProvider>
    );
  }
}

function mapStateToProps(state) {
  return state
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch)
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(HomePage)

With the following react-router, in client.js:

render(
  <div>
    <Provider store={store}>
      <Router history={hashHistory}>
        <Route
          path="/"
          component={HomePage}
        >
            <IndexRoute
              component={MainCard}
            />
            <Route
              component={FirstPage}
              path="Page 1"
            />
            <Route
              component={SecondPage}
              path="Page 2"
            />
            <Route
              component={ThirdPage}
              path="Page 3"
            />
            <Route
              component={ThreadPage}
              path="/discussion/:id"
            />
            <Route
              component={StaticPage}
              path="Static"
            />
        </Route>
      </Router>
    </Provider>
  </div>,
  document.getElementById('app')
)

And it worked fine. But I decided to make a 'MainPage' which is what I would like the website to start off with now. I would like to start off with 'MainPage' and when a button is clicked on, go to the 'HomePage' So I revised the react-router in client.js:

render(
  <div>
    <Provider store={store}>
      <Router history={hashHistory}>
        <Route
          component={MainPage}
          path="/"
        />
        <Route
          component={HomePage}
          path="Home"
        />
      </Router>
    </Provider>
  </div>,
  document.getElementById('app')
)

With the following in 'MainPage.js':

render(){
    return(
      <MuiThemeProvider muiTheme={muiTheme}>
        <div>
            <RaisedButton
              containerElement={<Link to={`Home`}/>}
              label="Sign In"
              labelColor='#88898C'
              labelStyle={{textTransform:'intial'}}
              style={styles.signIn}
            />
    </div>
          </MuiThemeProvider>
        )
      }
    }

    function mapStateToProps(state) {
      return state
    }

    function mapDispatchToProps(dispatch) {
      return {
        actions: bindActionCreators(actions, dispatch)
      }
    }

    export default connect(
      mapStateToProps, mapDispatchToProps
    )(MainPage)

Now when the button in 'MainPage.js' is clicked on, the link/URL changes to 'Home' correctly, but shows up the following error message for 'HomePage.js':

TypeError: Cannot read property 'props' of undefined

Trying to resolve it but seem to continue to overlook the issue. What may be the issue? Any help would be greatly appreciate it. Thank you.

Answer 1

The issue here is that in your first implementation, HomePage is a container component. HomePage is always rendered and inside of it other components are rendered.

In your follow-up, HomePage is no longer a container component. No other components are rendered inside of it. This means that this.props.children is undefined (it probably should be an empty array, but that's a React design decision).

In the switch condition, since this.props.children is undefined, doing undefined.props.route.path throws that TypeError.