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

Posted 2023-02-22

【中文标题】React-Router-Dom v5.2 ，无法从父级收到的道具中将道具传递给子组件

【英文标题】：React-Router-Dom v5.2 , unable to pass props to a child component from prop recieved by parent

【发布时间】：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 - 你能弄明白吗？

【参考方案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"]