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

替换这个：

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

with：

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

Answer 2

反应路由器新版本改变了路由道具对象如下： this.props.match.params 代替 this.props.params

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

Answer 3

我假设您没有使用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渲染来提供组件，您可以使用它执行以下操作

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 4

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

我用

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

和

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

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

获取ID

Answer 6

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

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

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

反应this.props.params undefined

6 个答案: