反应 this.props.params 未定义 [英] React this.props.params undefined

问题描述

我在将 id 传递到我的产品页面时遇到问题，我尝试了所有方法并搜索答案，但仍然无法正常工作.

这是我的 index.js:

从反应"导入反应；从react-dom"导入{render}；从反应路由器"导入 {Router, Route, IndexRoute, hashHistory};从./components/Menu"导入{Menu}；从 './components/MainPage' 导入 {MainPage}；从'./components/DetailsProduct'导入{DetailsProduct}；类 App 扩展了 React.Component{使成为(){返回(<路由器历史={hashHistory}>{/* <IndexRoute component={Menu}></IndexRoute>*/}<路由路径="/";component={()=>(<div><Menu/><MainPage/></div>)}></Route><Route path={"product/:id>} component={()=>(<div><Menu/><DetailsProduct>asd</DetailsProduct></div>)}></路由></路由器>)}}render(, window.document.getElementById(app"));

及详情产品(页面:http://localhost:8080/#/product/1)

从反应"导入反应；导出类 DetailsProduct 扩展 React.Component{使成为(){console.log(this.props.params);<-- 这是未定义的返回(<h1>产品</h1>)}}

我在 3 年后回到这里.解决方案:

以这种方式渲染组件并不是一个好的解决方案:

(
a​​sd<;/div>)}>

但是如果你想渲染这样的组件(我不推荐)，你必须添加 props 作为函数的参数参数，然后对你想要的组件进行重构道具({...道具})

(
a​​sd<;/div>)}>

最好的解决方案是这样的渲染路线:

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

在 DetailsProduct 中你可以渲染

或使用 Switch :

<开关><路由精确路径={"product/:id>} component={DetailsProduct}/>//在此处添加您想要的任何其他路线</开关>

解决方案

我用

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

和

从react-router-redux"导入 {syncHistoryWithStore, routerReducer}

然后我可以通过this.props.params.id

得到id

I have problem passing id to my page with product, I tried everything and search answer but it still doesn't work.

Here is my 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"));

And DetailsProduct (page: 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>
        )
    }
}

I came back here after a 3 years. Solution:

Rendering components in this way is not a good solution:

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

But if you want to render a component like this (which I do not recommend) you have to add props as param argument to the function and then make restructuring on the component in which you want that props({...props})

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

Best solution is render route like this:

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

and inside DetailsProduct you can render <Menu /> or use Switch :

<Menu/>
<Switch>
    <Route exact path={"product/:id"} component={DetailsProduct}/>
    // Add any other routes you want here
</Switch>

解决方案

I use

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

and

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

then I can get id by this.props.params.id

这篇关于反应 this.props.params 未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！