Не переносит меня на компонент (реагирует-роутер, ссылка)

Question

У меня проблема с реактив-роутером.

Мое приложение отображает список рецептов.В формулировщике вы вводите свои предпочтения (диета, калории, аллергия), следующая информация отправляется в API, затем отображается список рецептов.Я хочу показать название блюда, фотографию и кнопку, показывающую больше, что переместит меня на конкретную страницу данного блюда.

Этот компонент отвечает за отображение списка рецептов

class ListRecipes extends Component {
  render() {
    const { data } = this.props;

    const recipe = data
      ? data.hits.map((recipe, i) => {
          return <ItemRecipe recipe={recipe} key={i} />;
        })
      : null;

    return <ul>{recipe}</ul>;
  }
}

const mapStateToProps = state => {
  return {
    data: state.data
  };
};

ListRecipes = connect(
  mapStateToProps,
  null
)(ListRecipes);

export default ListRecipes;

Этот компонент отвечает за рендеринг одного рецепта

const ItemRecipe = ({ recipe }) => {
  const { label, image } = recipe.recipe;
  return (
    <li>
      <p> {label} </p>
      <img src={image} alt="food" />


      <Link to={`/meals/${label}`} >
        <p>More information</p>
      </Link >
    </li>
  );
}

Мой маршрутизатор выглядит следующим образом

export default (
  <BrowserRouter>
    <Switch>
      <Route exact={true} path="/" component={Main} />
      <Route path="/form" component={FormPage} />
      <Route path="/meals" component={ListRecipes} />
      <Route path="/meals/:name" component={props => <DetailsRecipe {...props} />} />
      <Route path="*" component={NotFound} />
    </Switch>
  </BrowserRouter>
);

После нажатия на рецепт адрес URL меняется,но это никуда меня не переводит.(http://localhost:3000/meals нажмите кнопку http://localhost:3000/meals/Shrimp,%20Lemon,%20And%20Parsley%20Pasta)

почему после нажатия на

<Link to={`/meals/${label}`} >
    <p>More information</p>
</Link >

меня не переводит на компонент DetailsRecipe.

Answer 1

Вам потребуется использовать withRouter HOC с ItemRecipe, поскольку он не получает реквизиты маршрутизатора

const ItemRecipe = ({ recipe }) => {
  const { label, image } = recipe.recipe;
  return (
    <li>
      <p> {label} </p>
      <img src={image} alt="food" />


      <Link to={`/meals/${label}`} >
        <p>More information</p>
      </Link >
    </li>
  );
}

export default withRouter(ItemRecipe);

Также вы должны закодировать свои параметры URL перед использованием с помощью ссылки, используя enocdeURIComponent, и расшифровать ее в DetailsRecipe, используя decodeURIComponent

.

<Link to={`/meals/${encodeURIComponenent(label)}`} >

Answer 2

Вы находитесь в теге switch, поэтому отображается первое совпадение. Первое совпадение для <Route path="/meals" component={ListRecipes} />, поэтому оно будет отображено. Попробуйте добавить параметр точно к этому маршруту route doc