[英]React-Router-Dom v5.2 , unable to pass props to a child component from prop recieved by parent
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 ie the grandfather.我在 react v16.13.1 项目中使用 react-router-dom v5.2.0,我正在使用 static 路由将道具从父组件传递给孙子组件,父组件从其父组件(即祖父)接收它。 From App.js -> Applayout.js recieves props and sends to -> APIData (last route)
从 App.js -> Applayout.js 接收道具并发送到 -> APIData(最后一条路线)
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>
)
}
}```
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.我最近确实更新了我正在使用的 babel 版本。 So, it's possible this was related to using an older babel version.
因此,这可能与使用较旧的 babel 版本有关。
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:我之前在 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"
}
}
Now I have this in package.json:现在我在 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:我之前有这个 in.babelrc :
{
"presets": ["env", "react"],
"plugins": ["transform-class-properties", "transform-object-rest-spread"]
}
Now I have this in.babelrc:现在我有这个 in.babelrc:
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.