Javascript 反应 this.props.params 未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45144085/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React this.props.params undefined
提问by Pawe? Baca
I have problem passing idto my page with product, i tried everything and search answer but it still does't work.
我在将id产品传递到我的页面时遇到问题，我尝试了所有方法并搜索答案，但它仍然不起作用。
Here is my index.js:
这是我的 index.js：
import React from "react";
import {render} from "react-dom";
import {Router, Route, IndexRoute, hashHistory} from "react-router";
import {Menu} from './components/Menu';
import {MainPage} from './components/MainPage';
import {DetailsProduct} from './components/DetailsProduct';
class App extends React.Component{
render(){
return(
<Router history={hashHistory}>
{/* <IndexRoute component={Menu}></IndexRoute> */}
<Route path="/" component={()=>(<div><Menu/><MainPage/></div>)}></Route>
<Route path={"product/:id"} component={()=>(<div><Menu/><DetailsProduct>asd</DetailsProduct></div>)}></Route>
</Router>
)
}
}
render(<App/>, window.document.getElementById("app"));
And DetailsProduct (page: http://localhost:8080/#/product/1)
和详细信息产品（页面：http://localhost:8080/#/product/1）
import React from "react";
export class DetailsProduct extends React.Component{
render(){
console.log(this.props.params); <-- this is undefined
return(
<h1>Product</h1>
)
}
}
采纳答案by Pawe? Baca
I use
我用
import { Router, Route, browserHistory, IndexRoute} from 'react-router'
and
和
import {syncHistoryWithStore, routerReducer} from 'react-router-redux'
then I can get id by this.props.params.id
然后我可以通过 this.props.params.id
回答by rajat
I was also getting the same problem when I used this.props.params.id.
我在使用时也遇到了同样的问题this.props.params.id。
But when i tried to put console.log(this.props)in the component where I'm passing the id, it shows my id in matchobject so use:
但是，当我尝试放入console.log(this.props)传递 id 的组件时，它会在匹配对象中显示我的 id，因此请使用：
this.props.match.params.id
to get the id (notice the added match).
获取 id（注意添加的match）。
回答by Glen Thompson
For me I was using the rendermethod and finding that this.props.matchwas undefinedin rendered components. This was the solution for me, you have to pass in props.
对我来说，我用的render是方法和结论this.props.match是undefined渲染的成分。这是我的解决方案，您必须传入props.
this.props.matchwill be undefinedfor:
this.props.match将undefined用于：
<Route path='/users/:id' render={() => <UserDetail/>}/>
Do this instead:
改为这样做：
<Route path='/users/:id' render={(props) => <UserDetail {...props}/>}/>
https://reacttraining.com/react-router/web/api/Route/render-func
https://reacttraining.com/react-router/web/api/Route/render-func
回答by Fawaz
replace this :
替换这个：
<Route path={"product/:id"} component={()=>(<div><Menu/><DetailsProduct>asd</DetailsProduct></div>)}></Route>
with :
和 ：
<Route path={"product/:id"} component={DetailsProduct}></Route>
回答by Mahmoud Ahmed
react router new version changed the route props object as the following: this.props.match.params instead this.props.params
反应路由器新版本将路由道具对象更改如下： this.props.match.params 代替 this.props.params
回答by Shubham Khatri
I assume you are not using react-router v4but either v2.x.xor v3.x.x. In that case you should restructure your routes and you can pass multiple component using the componentsprops as
我假设您没有使用react-router v4butv2.x.x或v3.x.x。在这种情况下，您应该重组您的路线，并且您可以使用components道具传递多个组件作为
<Router history={hashHistory}>
<Route path="/" component={Layout}>
<IndexRoute components={{menu: Menu, mainPage: MainPage}}/>
<Route path={"product/:id"} component={{menu: Menu, detail: DetailsProduct}}/>
</Route>
</Router>
And in the Menu Component
Also the way you want it work is relatively very easy to do using react-router v4. In that case you can make use of prop render to provide a component and you could do the following with it
并且在菜单组件中，您希望它的工作方式也相对非常容易使用react-router v4。在这种情况下，您可以使用 prop render 来提供组件，并且可以使用它执行以下操作
import {HashRouter as Router, Route} from 'react-router-dom';
...
<Router>
<Route path="/" render={()=>(<div><Menu/><MainPage/></div>)}></Route>
<Route path={"product/:id"} render={()=>(<div><Menu/><DetailsProduct>asd</DetailsProduct></div>)}></Route>
</Router>
