Как отправить реквизит детям в React Router v4?

Question

Мне нужно использовать fetch в дочернем компоненте, но я не знаю, как отправлять реквизиты в Route.Есть ли возможность сделать это или я должен сделать это другим способом?

Это маршрут в моем родительском компоненте:

<Route path={`/beers/:beerId`} component={Beer}/>

Тогда я хотел бы использовать fetch вДетский компонент:

    fetchData = () => {
    let url = `https://api.punkapi.com/v2/beers/${this.props.id}`;
    fetch(url, {method: 'get'}).then(resp => resp.json()).then((data) =>
        this.setState({
            data: data
        })
    );
};

Answer 1

Вам необходимо использовать атрибут render маршрута.Примером может быть:

<Route path={`/beers/:beerId`} render={(props) => <Beer {...props} beerList={beerList} />} />

, где beerList - гипотетическая функция или переменная, которая передается как prop до <Beer /> компонента.

Дополнительная информация: Простое учебное пособие по React Router v4

Answer 2

Когда Route совпадает, он вставит три реквизита в компонент, который он содержит:

• location: Информация о текущем местоположении.
• history:Доступ к истории браузера и способам навигации по ним.
• match: все параметры сопоставленного URL.

Итак, в вашем компоненте Beer вы можете получить доступ к параметру URL beerId, используя match.params.beerId, и ваш Ajax-вызов:

const {beerId} = this.props.match.params;

fetchData = () => {
    let url = `https://api.punkapi.com/v2/beers/${beerId}`;
    fetch(url, {method: 'get'}).then(resp => resp.json()).then((data) =>
        this.setState({
            data: data
        })
    );    
}   

Answer 3

Если вы хотите получить beerId из URL. Вы можете получить его из this.props.match.params.beerId.

Вы также можете передать его напрямую традиционным способом, используя метод рендеринга

<Route path={`/beers/:beerId`} render={()=><Beer id={YOURID}/>}/>

Если вы используете метод рендеринга, вы можете получить доступ к идентификатору, используя this.props.id.Но поскольку у вас уже есть идентификатор пива в URL, лучше всего, если вы получите его с помощью this.props.match.params.beerId.