アイテムの小道具をLink to Previewコンポーネント経由で渡すにはどうすればいいですか？

Question

ListItemからプレビューコンポーネントにアイテムの小道具にアクセスしてレンダリングしようとしています。

const RecipeListItem = (props) => { 
    return (
    <Card> 
     <Link to={`/recipes/${props.recipe.id}`}> 
     <Image src={props.recipe.url} /> 
     </Link> 
     <Card.Content> 
     <Card.Header> 
      {props.recipe.title} 
     </Card.Header> 
     <Card.Description> 
      {props.recipe.description} 
     </Card.Description> 
     </Card.Content> 
    </Card> 
) 
} 

export default RecipeListItem; 

私はリンクをクリックして、

私はプレビューコンポーネントを参照してくださいhttp://localhost:3000/recipes/1

にリダイレクトが、IDを持つアイテムにアクセスすることはできません：1つの小道具は、ページ上にレンダリングします。ここで

は私のプレビューコンポーネントです：

const RecipePreview = (props) => { 
    return (
     <Card> 
     <Image src={props.match.params.url} /> 
     <Card.Content> 
      <Card.Header> 
      {props.match.params.title} 
      </Card.Header> 
      <Card.Description> 
      {props.match.params.description} 
      </Card.Description> 
     </Card.Content> 
     </Card> 
    ) 
} 

export default RecipePreview; 

ルート：私はこのようなルックスを反復処理しています

const Main =() => (
    <main> 
    <Switch> 
     <Route exact path='/recipes' component={RecipeList}/> 
     <Route path='/create' component={AddRecipe}/> 
     <Route path='/recipes/:recipeId' component={RecipePreview}/> 
    </Switch> 
    </main> 
) 

export default Main; 

私のサンプルデータ：

constructor(props) { 
    super(props); 
    this.state = { 
      recipes: { 
       "1": { 
       id: 1, 
       url: 'http://via.placeholder.com/300x300', 
       title: '1st Title', 
       description: 'some decription 1' 
       }, 
       "2": { 
       id: 2, 
       url: 'http://via.placeholder.com/300x300', 
       title: '1st Title', 
       description: 'some decription 1' 
       }, 
       "3": { 
       id: 3, 
       url: 'http://via.placeholder.com/300x300', 
       title: '1st Title', 
       description: 'some decription 1' 
       } 
     } 
    } 
} 

Answer 1

あなたのプレビューコンポーネントのでがクラスの場合、の代わりにthis.props.xyzを使用してにアクセスする必要があります小道からのフィールド。

編集：

レシピのコレクションをプレビューコンポーネントに渡す必要があります。あなたがprops.match.paramsから得ることができる唯一のことは、あなたが渡しているrecipeIdです（読み：https://reacttraining.com/react-router/web/api/matchを）。

あなたはのparamに渡されたrecipeIdに基づいてレシピを得るためにあなたのレシピのコレクションを検索し、レンダリングするためにそれを使用する必要があります様々な情報。あなたのルートが

<Route path='/recipes/:recipeId' render={(props)=><RecipePreview recipes={this.recipes}/>}/> 

に変更する必要がある、レシピ集、（読み：https://reacttraining.com/react-router/web/api/Route）に合格するには