反应 this.props.params 未定义答案

【问题标题】：React this.props.params undefined反应 this.props.params 未定义
【发布时间】：2017-12-21 23:34:01
【问题描述】：

我在将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 作为函数的参数参数，然后对你想要的组件进行重组道具（{...道具}）

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

【问题讨论】：

您希望在this.props.params 中看到什么？
我没有看到你正在向传递道具？
它现在可以工作，但我必须通过两个组件“Menu 和 DetailsProduct”，你知道怎么做吗我能做到吗？
在中导入组件怎么样？

标签： javascript reactjs react-router

【解决方案1】：

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

但是当我尝试将console.log(this.props) 放在我传递 id 的组件中时，它会在 match 对象中显示我的 id，因此请使用：

this.props.match.params.id

获取 id（注意添加的match）。

【讨论】：

为什么 ^ 有效？这是基于反应路由器版本吗？

【解决方案2】：

对我来说，我使用 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

【讨论】：

这里的props可以是json对象吗？我想连同 id 的匹配一起发送道具。
谢谢。很好看！

【解决方案3】：

替换这个：

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

与：

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

【讨论】：

哇，谢谢它的工作，但我怎么能传递两个组件？
为什么要将 2 个组件传递给一个路由？那是不对的！或者，如果您正在寻找很有可能的嵌套路由/组件。
@Fawaz 如果您还想在路线中有多个组件，请查看我的答案
我如何转换我传递道具的路径render={() => ( <HomeContent activeUser={this.props.activeUser} isGuest={this.state.isGuest} isSupp={this.state.isSupp} isReady={this.state.isReady} /> )}

【解决方案4】：

react router 新版本更改了 route props 对象如下： this.props.match.params 反而 this.props.params

https://reacttraining.com/react-router/web/api/match

【讨论】：

【解决方案5】：

我假设您使用的不是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，您希望它的工作方式相对非常容易。在这种情况下，您可以使用 prop render 来提供组件，并且可以使用它执行以下操作

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>

【讨论】：

【解决方案6】：

我用

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

和

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

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

【讨论】：

【解决方案7】：

我有这个代码时遇到了同样的问题

<Route
    path={"/:url"}
    render={(routerProps) =>
        <BusinessApps
            {...routerProps}
            {...this.props}
            size={size}
        />
    }/>

我删除了 {...this.props} 来解决问题。

【讨论】：