React-Router-Dom v5.2 ，无法从父级收到的道具中将道具传递给子组件答案

【问题标题】：React-Router-Dom v5.2 , unable to pass props to a child component from prop recieved by parentReact-Router-Dom v5.2 ，无法从父级收到的道具中将道具传递给子组件
【发布时间】：2020-10-24 07:01:53
【问题描述】：

我在 react v16.13.1 项目中使用 react-router-dom v5.2.0，我使用静态路由将 props 从父组件传递给孙组件，父组件从其父组件（即祖父）接收它。从 App.js -> Applayout.js 接收 props 并发送到 -> 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>
                         
              
      )
  }
}```

【问题讨论】：

你看到Applayout的控制台输出了吗？
@Siddharth 不，我添加这个是为了查看数据是否进入 AppLayout 并且一切正常。在调试模式下，当我看到控制权传递给 APIData 时，道具不保存任何数据。
同样的事情发生在我身上。使用 react v16.13.1 和 react-router v5.2.0。我无法使用 Route 的 render 方法传递任何自定义道具。 <Route path="/foo" render={props => <MyComponent thisIsNotPassed={true} {...props} /> } />。 this.props.thisIsNotPassed 未定义。 @victorlazlow - 你能弄明白吗？

标签： javascript reactjs react-router-dom

【解决方案1】：

我遇到了同样的问题。我尝试了很多不同的方法，但都不起作用。在路由组件中，我试图传递的道具将是未定义的。

我最近确实更新了我正在使用的 babel 版本。因此，这可能与使用较旧的 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>

我之前在 package.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"
  }
}

我之前在 .babelrc 中有过这个：

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

现在我在 .babelrc 中有这个：

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

【讨论】：