Reagieren Router passieren Requisiten mit Link-

Question

Im mit Router Reagieren auf eine Seite in meiner App wie diese navigieren:

<Link to={`/single/${this.props.data.pageId}`} params={{singleId: 1}}>GotoPage!</Link> 

Dies funktioniert gut, aber ich würde auch eine zusätzliche Eigenschaft auf die neue Seite übergeben möchte.

Wenn eine Komponente Rendering ohne Verbindung mit würde ich so etwas tun:

<MyComponent myProp={this.props.data}/> 

ich versucht habe myProp={this.props.data} entlang in params wie dies vorbei:

<Link to={`/single/${this.props.data.pageId}`} params={{singleId: 1, myProp={this.props.data}}}>GotoPage!</Link> 

Aber es scheint nicht so zu arbeiten, myProp ist auf der neuen Seite undefiniert auf der neuen Seite, wie es sich ergibt:

Soll ich nicht routenbezogene Parameter mit Link nicht übergeben?

Answer 1

In der documentation für Link und auch die Quelle, es gibt keine Erwähnung davon unter param. Aber ich verstehe, was du versuchst.

Anstelle der Festcodierung von Routen kann die Verwendung der Verlaufsfunktion des react-routers router.push() empfohlen werden. Tun Sie etwas, wie diese statt:

class Foo extends React.Component { 
    ... 
    const handleNewRoute =() => { 
    let { pageId } = this.props.data 
    let singleId = '1' 
    this.context.router.push({ // use push 
     pathname: `/single/${pageId}`, 
     query: { singleId } 
    }) 
    } 

    render() { 
    return (
     <button onLeftClick={this.handleNewRoute} /> 
    ) 
    } 
} 

By the way, in React/JSX, so etwas wie ...{{singleId: 1, myProp={this.props.data}}}... sollte <Link...foobar={{singleId: 1, myProp: this.props.data}}> sein. Die frühere Syntax ist falsch.

Answer 2

Ich denke, der bessere Weg, um die zusätzlichen Daten zu erhalten, ist ein Ajax.

Aber wenn Sie Ihren Weg dies tun wollen, überprüfe ich die API von Link und ich finde eine Abfrage-Eigenschaft.

query: 

An object of key:value pairs to be stringified. 

so können Sie diese verwenden, um ein Objekt von Schlüssel zu übergeben: Wert auf die nächste Strecke, aber das Objekt wird Zeichenfolge und weitergegeben werden, obwohl die url ich think.I eine Ajax für diese bevorzugen.