React路由器domv5。2、无法从父组件接收的道具将道具传递给子组件

Question

我正在使用react路由器dom v5。反应v16中的2.0。13.1项目中，我使用静态路由将道具从父组件传递到子组件，父组件从其父组件（即祖父）接收道具。从应用程序。js-

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

我也有同样的问题。我尝试了很多不同的方法，但都没有成功。在路径组件中，我试图传递的道具将是未定义的。

我最近确实更新了我使用的babel版本。所以，这可能与使用旧的巴别塔版本有关。

使用这个结构对我很有效：

<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>

我把这个打包了。之前的json：

{
  "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"
  }
}

现在我有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"
  }
}

我有这个。法律改革委员会：

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

现在我有了这个。法律改革委员会：

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