如何在React Router v4中向孩子發送道具？

Question

我必須在子組件中使用提取功能，但是我不知道如何在Route中發送道具。 是否可以選擇執行此操作，還是必須以其他方式執行此操作？

這是我的父組件中的路由：

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

然后，我想在子組件中使用提取：

    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

如果您希望從URL中獲取beerId，則可以從this.props.match.params.beerId獲取它。

您還可以使用render方法以傳統方式直接傳遞它

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

如果您使用的是render方法，則可以使用this.props.id訪問id。 但是，由於您已經在URL中包含了啤酒ID，因此最好使用this.props.match.params.beerId獲得啤酒ID。

Answer 2

Route匹配時，它將向其持有的組件注入三個道具：

• location ：有關當前位置的信息。
• history ：訪問瀏覽器的歷史記錄和瀏覽方法。
• match ：所有匹配的URL參數。

因此，在Beer組件中，您可以使用match.params.beerId和Ajax調用來訪問URL參數beerId ：

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

您需要使用路線的render屬性。 一個例子是：

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

其中beerList是一個假設函數或變量，它作為prop向下傳遞給<Beer />組件。

更多信息： 一個簡單的React Router v4教程