React-Router-Dom v5.2 , unable to pass props to a child component from prop recieved by parent

Question

I am using react-router-dom v5.2.0 in a react v16.13.1 project, I am using static routes to pass props to a grandchild component from parent component which receives it from its parent i.e the grandfather. From App.js -> Applayout.js recieves props and sends to -> APIData (last route)

class AppLayout extends Component{
  constructor(props){
    super(props);
  }
  render(){
    console.log('Applayout'+' '+ this.props.data[1]);
      return(
          <Router>
              <div>
                  <Navbar/>
                  <div className={classes.main}>
                      <Sidebar/>
                      <div className = {classes.pages}>
                          <Route path='/' exact component={Dashboard}/>
                          <Route path='/toolsandutils' exact component={ToolsandUtils}/>
                          <Route path='/failures' component={Failures}/>
                          <Route path='/osshare' component={OSshare}/>
                          <Route path='/employee' component={Employee}/>
                          <Route path='/apidata' render={props=> <APIData data={this.props.data}/>}/>
                      </div>
                  </div>                
              </div>
          </Router>
                         
              
      )
  }
}```

Answer 1

I was having the same issue. I tried a lot of different things that didn't work. In the route component the props I was trying to pass down would be undefined.

I did recently update the version of babel I was using. So, it's possible this was related to using an older babel version.

Using this structure is working for me:

<Router>
  <Switch>
    <Route
      exact
      path="/admin/clients"
      render={() =>
        <ClientsRoute
          onSaveClient={this.handleSaveClient}
          onActivateExistingClient={this.handleActivateExistingClient}
        />
      }
    />
    <Route
      exact
      path="/admin/clients/:page(\d+)"
      render={() =>
        <ClientsPagedRoute
          onSaveClient={this.handleSaveClient}
          onActivateExistingClient={this.handleActivateExistingClient}
        />
      }
    />
  </Switch>
</Router>

I had this in package.json before:

{
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1"
  }
}

Now I have this in package.json:

{
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "regenerator-runtime": "^0.13.7"
  }
}

I had this in .babelrc before:

{
  "presets": ["env", "react"],
  "plugins": ["transform-class-properties", "transform-object-rest-spread"]
}

Now I have this in .babelrc:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}