React-router Route 不渲染组件

Question

我正在尝试在以下代码中使用反应路由器，并渲染 RecipeCardDetail 组件。 URL 更改但没有呈现。它只是在我单击 URL 并按 Enter 时呈现。我试图在 RecipeCardDetail 组件中显示 recipeId（URL 参数）。如果可能的话，我想要一些帮助。

在我的组件下方。

App.js

import React, { useEffect, useState } from 'react';
import './App.css';
import RecipeCard from './components/RecipeCard/RecipeCard';
import RecipeCardDetail from "./components/RecipeCardDetail/RecipeCardDetail"
import Form from './components/Form/Form';
import axios from 'axios';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

function App() {
  const [recipes, setRecipes] = useState([])
  const [filter, setFilter] = useState("")
  const [query, setQuery] = useState("")
  
  useEffect(() => {
    getRecipe()
  }, [query])

  const getRecipe = () => {
    const key = process.env.REACT_APP_RECIPE_SEARCH_APP_API_KEY
    const id = process.env.REACT_APP_RECIPE_SEARCH_APP_ID
    axios.get(`https://api.edamam.com/api/recipes/v2?type=public&q=${query}&app_id=${id}&app_key=${key}`)
    .then(response => {
      console.log(response.data.hits)
      setRecipes(response.data.hits)
    })
    .catch(error => {
      console.log(error)
    })
  }
  
  return (
    <Router>
      <div className="App">
        <div className="container">
        <Form setFilter={setFilter} setQuery={setQuery} filter={filter} />
          <div className="row">
            <Switch>
              <Route exact path="/" >
                {recipes.map((item, id) => { 
                  return <RecipeCard key={id} img={item.recipe.image} title={item.recipe.label} ingredients={item.recipe.ingredientLines} recipeId={id} />
                  })}
              </Route>
              <Route path="/recipe-card-detail/:recipeId" >
                <RecipeCardDetail />
              </Route>
            </Switch>
          </div>
        </div>  
      </div>
    </Router>
  );
}

export default App;

RecipeCard.js

import React from 'react'
import "./style.css"
import "../../../node_modules/bootstrap/dist/css/bootstrap.min.css"
import { BrowserRouter as Router, Link } from "react-router-dom"

function RecipeCard( { img, title, ingredients, recipeId } ) {
    
    
    return (
        <Router>
            <div className="col-xl-4 col-md-6 col-s-12">
                <div className="card mt-5" style={{ width: "24rem" }}>
                    <img src={img} className="card-img-top" alt="img" />
                    <div className="card-body">
                        <h3 className="text align">{title}</h3>
                        <ul className="card-text">
                            {ingredients.map((item, id) => {
                                return <li key={id} >{item}</li>
                            })}
                        </ul>
                        <Link to={`/recipe-card-detail/${recipeId}`}>Details</Link>
                    </div>
                </div>
            </div>
        </Router>
    )
}
export default RecipeCard

Answer 1

尝试更改定义路线的顺序。

<Switch>
      <Route path="/recipe-card-detail/:recipeId" >
        <RecipeCardDetail />
      </Route>
      <Route exact path="/" >
        {recipes.map((item, id) => { 
          return <RecipeCard key={id} img={item.recipe.image} title={item.recipe.label} ingredients={item.recipe.ingredientLines} recipeId={id} />
        })}
      </Route>
</Switch>