我在将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"));

和详细信息产品（页面：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作为 param 参数添加到函数中，然后在你想要 props( {...props} )的组件上进行重构

<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>