如何通过链接传递道具

Question

在这里做出反应是相当新的。我正在制作一个带有 api 的小型食谱查找器应用程序。获取数据后，我正在映射结果并将它们显示在组件中。我想要做的是通过另一条路线中的另一个组件显示每个配方的详细信息。我不知道该怎么做。我以为我可以通过 Link 传递映射的配方，但它不起作用。这是我目前所拥有的。

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <Router>
    <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

App.js

import React, { useState, useEffect} from "react";
import axios from "axios";
import { BrowserRouter as Router, Routes, Route, useNavigate} from "react-router-dom";
import "./App.css";
import RecipeList from "./RecipeList";
import Recipe from "./Recipe";
import Header from "./Header";

function App() {
  const navigate = useNavigate();
  
  const [recipes, setRecipes] = useState([]);
  const [query, setQuery] = useState("");
  const [search, setSearch] = useState("");
  const APP_ID = "XXXXXXXXX";
  const APP_KEY = "XXXXXXXXXXXXXXXXXXXXXX";
  const url = `https://api.edamam.com/api/recipes/v2?type=public&q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}`;

  const getRecipes = async () => {
    const res = await axios(url);
    const data = await res.data.hits;
    console.log(data);
    setRecipes(data);
  };
  useEffect(() => {
    getRecipes();
  }, [query]);

  const updateSearch = (e) => {
    setSearch(e.target.value);
    console.log(search);
  };

  const getSearchQuery = (e) => {
    e.preventDefault();
    setQuery(search);
    setSearch("");
    navigate("/recipes");
  };

  return (
    <div className="App">
      <Header />
      <div>
        <div className="container">
          <form className="search-form" onSubmit={getSearchQuery}>
            <input
              className="search-input"
              type="text"
              value={search}
              onChange={updateSearch}
              placeholder="search by food name"
            />
          </form>
        </div>
      </div>

        <Routes>
          <Route path="/recipes" element={<RecipeList recipes={recipes} />} />
          <Route path="/recipes/:id" element={<Recipe recipes={recipes} />}/>
        </Routes>
    
    </div>
  );
}

export default App;  

RecipeList.jsx

import React from "react";

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

const RecipeList = ({ recipes }) => {
  return (
    <div className="container">
      <div className="grid-container">
        {recipes.map(({ recipe }) => (
          <Link to={`/recipes/${recipe.label}`}>
            <img key={recipe.image} src={recipe.image} alt="" />
            <p key={recipe.label}>{recipe.label}</p>
            <p>{recipe.id}</p>
          </Link>
        ))}
      </div>
    </div>
  );
};

export default RecipeList;

食谱.jsx

const Recipe = ({recipe}) => {

    return (
        <div>
            <h1>{recipe.label}</h1>
        </div>
    )
}

export default Recipe

我还接近吗？？？

Answer 1

您将整个 recipes 数组传递给两个路由组件。

<Routes>
  <Route path="/recipes" element={<RecipeList recipes={recipes} />} />
  <Route path="/recipes/:id" element={<Recipe recipes={recipes} />}/>
</Routes>

所以Recipe 可以使用整个数组和id 路由匹配参数来搜索传递的数组并通过匹配label 来呈现确切的配方。

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

const Recipe = ({ recipes }) => {
  const { id } = useParams();
  const recipe = recipes.find(recipe => recipe.label === id); // *

  return recipe ? (
    <div>
      <h1>{recipe.label}</h1>
    </div>
  ) : null;
};

* 注意：由于您将路由参数称为id，因此链接的recipe.id 对我们来说可能更有意义。

{recipes.map(({ recipe }) => (
  <Link to={`/recipes/${recipe.id}`}>
    <img key={recipe.image} src={recipe.image} alt="" />
    <p key={recipe.label}>{recipe.label}</p>
    <p>{recipe.id}</p>
  </Link>
))}

...

const recipe = recipes.find(recipe => recipe.id === id);