Реагировать маршрутизатор, передать реквизит с Link

Question

Im используя Реагировать маршрутизатор для перехода на страницу в моем приложении, как это:

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

Это прекрасно работает, но я хотел бы, чтобы передать дополнительное свойство на новую страницу.

При визуализации компонента без использования Link я хотел бы сделать что-то вроде:

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

Я попытался прохождения myProp={this.props.data} вместе в Params так:

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

Но это не похоже на работу, как myProp не определена на новой странице, так как вы можете возражать против страницы, которую я могу получить:

this.props.params.pageId; 

Я не должен был передавать параметры, не связанные с маршрутом, с помощью Link?

Answer 1

В documentation для Link, а также источник, об этом не упоминается param. Но я получаю то, что вы пытаетесь сделать.

Вместо путей жесткого кодирования могу ли я рекомендовать использовать функцию истории реакции-маршрутизатора router.push(). Сделайте что-нибудь, как это вместо:

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

Кстати, в React/JSX, что-то вроде ...{{singleId: 1, myProp={this.props.data}}}... должно быть <Link...foobar={{singleId: 1, myProp: this.props.data}}>. Первый синтаксис неверен.

Answer 2

Я думаю, что лучший способ получить дополнительные данные - это ajax.

Но если вы хотите, чтобы ваш способ сделать это, я проверяю api Link и обнаруживаю свойство запроса.

query: 

An object of key:value pairs to be stringified. 

так что вы можете использовать это, чтобы передать объект ключа: значение к следующему пути, но этот объект будет строковым и прошел, хотя я URL think.I предпочитает Аякс для этого.