React RouterパスからURLパラメータを取得する方法

Question

MERN（Mongo、Express、React、Node）スタックにシンプルなCRUDレシピアプリケーションを作成しています。他のロジックは少し痛いです。私はここで

<Route exact path='/recipe/:recipeId' render={() => (<Recipe getRecipe={this.props.getRecipe} edit={this.props.updateRecipe} />)} />

ルート

から私の個々のレシピのパラメータにアクセスすることができないよう

はルートで参照レシピコンポーネントです：

import React from 'react'; 
import moment from 'moment'; 
import IngredientsList from './ingredients-list.js'; 


export default class Recipe extends React.Component { 
constructor(props) { 
    super(props); 
    console.dir(this.props); 
    let id = this.props.match.params.recipeId; 
    this.setState({ 
     recipe: this.props.getRecipe(id), 
    }); 

}; 
componentDidMount =() => { 
    console.dir(this.props); 
    let id = this.props.match.params.recipeId; 

    this.setState({ 
     recipe: this.props.getRecipe(id), 
    }); 
} 
render() { 
    return (
     <div className="recipe-display container-fluid"> 
      <div className="recipe-header"> 
       <h1>{this.state.recipe.name}</h1> 
       <h3>By {this.state.recipe.author}</h3> 
       <hr /> 
       <h4>Category: {this.state.recipe.category}</h4> 
       <p className="recipe-date">Created: {moment(this.state.recipe.createdDate).format('MMMM Do YYYY, h:mm a')}</p> 
       <p>Description: {this.state.recipe.description}</p> 
       <div className="recipe-btns">      
        <button 
         className="btn btn-danger pull-right btn-sm close-recipe" 
         onClick={this.props.close} 
         title="Close this Recipe">Close</button> 
        <button 
         className="btn btn-success pull-right btn-sm edit-recipe" 
         onClick={this.props.edit} 
         title="Edit this Recipe">Edit</button> 
       </div> 
      </div> 
      <div className="recipe-body"> 
       <div className="recipe-timing"> 
        <p>Prep Time: {this.state.recipe.prepTime}</p> 
        <p>Cook Time: {this.state.recipe.cookTime}</p> 
       </div> 
       <div className='ingredients panel panel-info'> 
        <div className='panel-heading'>Ingredients:</div> 
        <div className='panel-body'> 
         <div className="ingredients-list"> 
          <IngredientsList ingredients={this.state.recipe.ingredients} /> 
         </div> 
        </div> 
       </div> 
       <div className='directions panel panel-success'> 
        <div className='panel-heading'>Directions:</div> 
        <div className='panel-body'> 
         {this.state.recipe.directions} 
        </div> 
       </div> 
      </div> 
     </div> 
    ); 
} 
} 

私が試しましたいくつかの異なる方法で、this.props.match.params.recipeIdを呼び出し、さまざまなライフサイクル関数などのコンストラクタで呼び出すことができます。現在取得しているエラーは

です。

Uncaught TypeError: Cannot read property 'params' of undefined

私はおそらく単純なものがありません。ありがとう！

<Route exact path='/recipe/:recipeId' render={(props) => (<Recipe getRecipe={this.props.getRecipe} edit={this.props.updateRecipe} {...props} />)} /> 

あなたの元のコードに問題が、あなたは<Recipe />に小道具を送信しませんでしたされています

Answer 1

はこれを試してみてください。 renderを使用する場合は、手動で小道具を送信する必要があります。