Phản hồi this.props.params không được xác định

Question

Tôi gặp sự cố với id chuyển đến trang của mình với sản phẩm, tôi thử eveything và câu trả lời tìm kiếm nhưng vẫn không hoạt động.

Đây là index.js tôi:

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")); 

Và DetalisProduct (trang: 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> 
     ) 
    } 
} 

Answer 1

thay thế này:

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

với:

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

Answer 2

Tôi giả sử bạn không sử dụng react-router v4 nhưng là v2.x.x hoặc v3.x.x. Trong trường hợp đó, bạn nên tái cấu trúc các tuyến đường của bạn và bạn có thể vượt qua nhiều thành phần sử dụng components đạo cụ như

<Router history={hashHistory}> 
     <Route path="/" component={Layout}> 
       <IndexRoute components={{menu: Menu, mainPage: MainPage}}/> 
       <Route path={"product/:id"} component={{menu: Menu, detail: DetailsProduct}}/> 
     </Route> 
    </Router> 

Và trong Menu Component Cũng theo cách bạn muốn nó làm việc là tương đối rất dễ dàng để làm bằng react-router v4. Trong trường hợp đó bạn có thể tận dụng prop làm để cung cấp một phần và bạn có thể làm như sau với nó

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> 

Answer 3

Tôi cũng đã nhận được cùng một vấn đề khi tôi sử dụng this.props.params.id.

Nhưng khi tôi đã cố gắng để đưa console.log(this.props) trong thành phần nơi tôi đi qua các id, nó cho thấy id của tôi trong trận đấu đối tượng nên sử dụng:

this.props.match.params.id 

để có được id (chú ý thêm match).