我无法通过 id
到我的产品页面,我尝试了所有方法并搜索了答案,但它仍然不起作用。
这是我的 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"));
及详情Product (页面: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>
)
}
}
3 年后我回到了这里。解决方案:
以这种方式渲染组件不是一个好的解决方案:
<Route path={"product/:id"} component={()=>(<div><Menu/><DetailsProduct>asd</DetailsProduct></div>)}></Route>
但是如果你想渲染这样的组件(我不推荐)你必须添加 props 作为函数的参数参数,然后在你想要的组件上进行重构 Prop ({... Prop })
<Route path={"product/:id"} component={(props)=>(<div><Menu/><DetailsProduct>asd</DetailsProduct></div>)}></Route>
最好的解决方案是像这样渲染路由:
<Route path={"product/:id"} component={DetailsProduct}></Route>
内部 DetailsProduct
你可以渲染 <Menu />
或使用 Switch
:
<Menu/>
<Switch>
<Route exact path={"product/:id"} component={DetailsProduct}/>
// Add any other routes you want here
</Switch>
最佳答案
我在使用 this.props.params.id
时也遇到了同样的问题。
但是当我尝试将 console.log(this.props)
放在我传递 id 的组件中时,它会在 match 对象中显示我的 id 所以使用:
this.props.match.params.id
获取 id(注意添加的 match
)。
关于javascript - react this.props.params undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45144085/