React routera, przechodzą rekwizyty z Łącze

Question

Im przy React routera, aby przejść do strony w mojej aplikacji tak:

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

Działa to dobrze, ale chciałbym również zdać dodatkowy obiekt do nowej strony.

Podczas renderowania komponentu bez użycia link chciałbym zrobić coś takiego:

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

Próbowałem przechodzącą myProp={this.props.data} wzdłuż params tak:

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

Ale to nie wydają się działać jako myProp jest niezdefiniowany na nowej stronie jako przeciwny do pageId, które mogę uzyskać:

this.props.params.pageId; 

Czy nie powinienem mieć możliwości przekazywania parametrów niezwiązanych z trasą za pomocą Link?

Answer 1

W documentation dla Link, a także źródło, nie ma żadnej wzmianki o tym biorąc param. Ale dostaję to, co próbujesz zrobić.

Zamiast tras o sztywnym kodowaniu, polecam korzystanie z funkcji historii routera reagowania router.push(). Czy coś takiego zamiast:

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} /> 
    ) 
    } 
} 

Nawiasem mówiąc, w React/JSX, coś ...{{singleId: 1, myProp={this.props.data}}}... powinny być <Link...foobar={{singleId: 1, myProp: this.props.data}}>. Poprzednia składnia jest błędna.

Answer 2

Myślę, że lepszym sposobem na uzyskanie dodatkowych danych jest ajax.

Ale jeśli chcesz, aby to zrobić, sprawdzam api Link i znajduję właściwość zapytania.

query: 

An object of key:value pairs to be stringified. 

więc można to wykorzystać, aby przekazać obiekt kluczowych: wartość do następnej trasy, ale ten obiekt zostanie stringified i przeszedł chociaż url think.I Wolę Ajax dla tego produktu.