webentwicklung-frage-antwort-db.com.de

Reagiert this.props.params undefined

Ich habe ein Problem mit der Pass-ID für meine Seite mit dem Produkt. Ich versuche alles und suche die Antwort, aber es funktioniert immer noch nicht.

Hier ist meine 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"));

Und DetalisProduct (Seite: 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>
        )
    }
}
9
Paweł Baca

Ich benutze 

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

und

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

dann kann ich id durch this.props.params.id bekommen

0
Paweł Baca

Das gleiche Problem bekam ich auch, als ich this.props.params.id verwendete.

Aber als ich versuchte, console.log(this.props) in die Komponente zu setzen, in der ich die ID übergeben habe, zeigt sie meine ID in match object an.

this.props.match.params.id

um die id zu erhalten (beachte die hinzugefügte match).

14
rajat

Für mich habe ich die render -Methode verwendet und festgestellt, dass this.props.match war undefined in gerenderten Komponenten. Dies war die Lösung für mich, Sie müssen props übergeben.

this.props.match wird undefined sein für:

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

Tun Sie dies stattdessen:

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

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

5
Glen Thompson

ersetzen Sie dies:

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

mit:

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

reagieren Sie die neue Version des Routers. Das Route-Props-Objekt wurde folgendermaßen geändert: this.props.match.params stattdessen this.props.params

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

2
Mahmoud Ahmed

Ich gehe davon aus, dass Sie nicht react-router v4 verwenden, sondern entweder v2.x.x oder v3.x.x. In diesem Fall sollten Sie Ihre Routen neu strukturieren und Sie können mehrere Komponenten mithilfe der Option components props als übergeben

   <Router history={hashHistory}>
        <Route path="/" component={Layout}>
              <IndexRoute components={{menu: Menu, mainPage: MainPage}}/>
              <Route path={"product/:id"} component={{menu: Menu, detail: DetailsProduct}}/>
         </Route>
    </Router>

Und in der Menükomponente Die Art und Weise, wie Sie möchten, ist mit react-router v4 relativ einfach zu bewerkstelligen. In diesem Fall können Sie prop render verwenden, um eine Komponente bereitzustellen, und Sie können damit Folgendes tun

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>
1
Shubham Khatri