反應this.props.params undefined

我有傳遞id到我的產品頁面的問題，我嘗試eveything和搜索答案，但它仍然不工作。反應this.props.params undefined

這裏是我的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"));

而且DetalisProduct （頁：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> 
     ) 
    } 
}

來源

2017-07-17 Paweł Baca

你希望在'this.props.params'中看到什麼？ – Andrew

我沒有看到你正在傳遞道具給？ –

它現在的工作，但我必須通過兩個組件「菜單和DetailsProduct」，你知道我怎麼能做到這一點？ –

替換此：

<Route path={"product/:id"} component={()=>(<div><Menu/><DetailsProduct>asd</DetailsProduct></div>)}></Route>

有：

<Route path={"product/:id"} component={DetailsProduct}></Route>

來源

2017-07-17 12:29:11 Fawaz

哇由於它的工作，但如何我可以傳遞兩個組件？ –

爲什麼你想要傳遞2個組件到一條路線？那是不對的！或者如果你正在尋找很有可能的嵌套路線/組件。 – Fawaz

@Fawaz檢查我的答案，如果你想在路線中仍然有多個組件 –

我假設您沒有使用react-router v4，而是使用v2.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>

並在菜單組件你也希望它的工作相對很容易使用react-router v4做的方式。在這種情況下，你可以使用道具的呈現提供一個組件，你可以用它做

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>

來源

2017-07-17 14:46:38

我也得到了同樣的問題，當我用this.props.params.id以下。

但是，當我試圖把console.log(this.props)在我傳遞了ID的組成部分，它表明我在比賽對象的ID，這樣使用：

this.props.match.params.id

獲得ID（注意添加match ）。

來源

2017-08-12 13:38:10 rajat

這也適用於我......以及任何人都知道爲什麼？ –

爲什麼^起作用？這是基於反應路由器版本？ – mayaah

反應this.props.params undefined

回答

相關問題