反应this.props.params undefined

Question

我有传递ID到我的页面与产品的问题,我尝试eveything和搜索答案,但它仍然无法正常工作.

这是我的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>
        )
    }
}

Answer 1

我用的时候也遇到了同样的问题this.props.params.id.

但是当我试图放入console.log(this.props)我传递id的组件时,它会在match对象中显示我的id,所以使用:

this.props.match.params.id

获取id(注意添加match).

Answer 2

替换为：

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

与：

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

Answer 3

对我来说，我使用的是render方法，this.props.match并undefined在渲染组件中找到它。这是我的解决方案，您必须通过props。

this.props.match将undefined用于：

<Route path='/users/:id' render={() => <UserDetail/>}/>

改为这样做：

<Route path='/users/:id' render={(props) => <UserDetail {...props}/>}/>

https://reacttraining.com/react-router/web/api/Route/render-func

Answer 4

我用

import { Router, Route, browserHistory, IndexRoute} from 'react-router'

和

import {syncHistoryWithStore, routerReducer} from 'react-router-redux'

然后我可以通过以下方式获取idthis.props.params.id