React Router: как перейти к другому компоненту с помощью тегов привязки

Question

Я создаю React App , который отображает рецепты, и в моем Recipe компоненте я хочу иметь возможность щелкать теги привязки и переходить к другому компоненту с именем RecipeInfo.js и передавать некоторые из них. реквизит вместе с ним, как {title, ingredients}. Как именно это должно быть установлено? Пока у меня есть Recipe код компонента, подобный этому

import React from "react";
export default function Recipe({ title, calories, image }) {
  return (
    <>
      <a href="/"><h1>{title}</h1></a>
      <p>{Math.round(calories)} calories</p>
      <img src={image} alt="" />
    </>
  );
}

, и мое приложение. js код, подобный этому

import React, { useEffect, useState } from "react";
import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";
import Recipe from "./Recipe.js";
import RecipeInfo from "./RecipeInfo.js";
import "./styles.css";

export default function App() {
  const API_ID = "c38daf94";
  const API_KEY = "850d468a3e994692691631c7c259406c";

  const [recipes, setRecipes] = useState([]);
  const [search, setSearch] = useState("");
  const [query, setQuery] = useState();

  useEffect(() => {
    async function getRecipes() {
      const response = await fetch(
        `https://api.edamam.com/search?q=${query}&app_id=${API_ID}&app_key=${API_KEY}`
      );
      const data = await response.json();
      setRecipes(data.hits);
      console.log(data.hits);
    }
    if (query !== "") getRecipes();
  }, [query]);


  const updateRecipes = e => {
    setSearch(e.target.value);
  };

  const getSearch = e => {
    e.preventDefault();
    console.log(query)
    setQuery(search);
  };

  return (


    <div className="App">
      <input
        className="input"
        onChange={updateRecipes}
        value={search}
        type="text"
      />
      <button className="search" onClick={getSearch}>
        Search
      </button>
      <div className="recipes">
        {recipes.map(recipe => (
          <Recipe
            key={recipe.recipe.uri}
            title={recipe.recipe.label}
            calories={recipe.recipe.calories}
            image={recipe.recipe.image}
          />
        ))}
      </div>
      <Router>
        <Route
        exact path = "/recipeinfo"
        render={props => (
          <RecipeInfo
          {...props}

          />
        )}
        />
      </Router>
    </div>
  );
}

Answer 1

В своем первом фрагменте вы меняете тег a на компонент Link, экспортируемый реагирующим маршрутизатором.

Этот пример можно посмотреть в документах . пользовательской Link интеграции. Этот компонент полезен, потому что он будет вызывать API истории вместо того, чтобы просто пытаться загрузить URL на страницу.

Answer 2

import {Link} from 'react-router-dom';

и затем замените <a> на <Link to='/'>