¿Por qué hacer clic en el enlace con el router de react muestra el contenido? Realmente aprecio cualquier consejo

Estoy creando una aplicación de recetas de react. Hay la parte principal de Recipe.js que muestra las propias recetas y al hacer clic en el nombre se supone que muestra detalles sobre la receta que aún no tengo que configurar. Pero primero este problema surgió después de hacer clic en el enlace me redirige a otra página, pero no muestra el contenido, en este caso el texto de lorem.

App.js

import RecipeList from './RecipeList';
import './App.css';
import RecipeProvider from './RecipeContext'
import Form from './Form';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import {RecipeContext} from './RecipeContext';
import {useContext} from 'react';
import Details from './Details';

function App() {

  const [recipes,setRecipes]=useContext(RecipeContext) 
  
  return (

  








{recipes.map(item=>(
  




)

)}




  );
}

export default App;

Recipe.js

import React from 'react'
import Image from "./vitaminDfood-1132105308-770x553.jpg"
import './Recipe.css'
import {Link} from 'react-router-dom'
import Details from './Details';
function Recipe(props) {
    return (
        

        

        
        
        

     
{props.name}
 
       
 {props.score.toFixed(2)}
       
{props.duration}min.
 
        
        
    )
}

export default Recipe

Details.js

import {RecipeContext} from './RecipeContext';
import {useContext} from 'react';
import './Details.css'
import React,{useEffect,useState} from 'react';
import axios from 'axios';


function Details() {

  return (
    
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos ullam at dolorum! Vel odit alias nesciunt nisi reiciendis pariatur dicta doloremque at! Enim, ipsam repellendus illo quisquam sequi aliquam suscipit.
    )
}

export default Details;

Pregunta hecha hace 3 años, 4 meses, 29 días - Por devdoodle

2 Respuestas:

• El problema que estás experimentando con el enlace en React puede ser debido a un error en la forma en que se está usando el componente <Link> de react-router-dom en el archivo Recipe.js.

  En la parte de Recipe.js, en lugar de <link to="{/${props.name}}"/>, deberías usar <Link to={/${props.name}}></Link>. Debes abrir y cerrar la etiqueta <Link> correctamente y usar las comillas de forma adecuada para pasar la ruta como una variable.

  Por lo tanto, el código en Recipe.js debería verse así:

  ```jsx import React from 'react' import Image from "./vitaminDfood-1132105308-770x553.jpg" import './Recipe.css' import {Link} from 'react-router-dom' import Details from './Details';

  function Recipe(props) { return (

  

  /${props.name}}>

  {props.name}

  {props.score.toFixed(2)}

  {props.duration}min.

  ) }

  export default Recipe ```

  Una vez que corrijas este error, al hacer clic en el enlace en Recipe.js, deberías ser redirigido a la página de Details y ver el contenido correctamente. ¡Espero que esta solución te ayude a resolver el problema!

  Respondida el Dec 18, 2020 a las 13:28 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• El problema:

  Estás utilizando Link de react-router-dom dentro de Recipe.js para navegar a páginas de detalles de recetas. Pero por alguna razón, al hacer clic en estos enlaces, se te redirige a /lorem-ipsum en lugar de la ruta correcta para la receta seleccionada.

  Solución:

  El problema radica en la forma en que estás definiendo las rutas en App.js. Has configurado las rutas para que coincidan con rutas exactas, pero tus enlaces en Recipe.js no especifican rutas exactas.

  Código corregido:

  App.js:

  ``jsx <Switch> <Route exact path="/pridat-recept"> <Form /> </Route> {recipes.map((item) => ( <Route path={/${item.name}`}>

  ))}

  
  
  Recipe.js:
  
  

  jsx

  /${props.name}}>

  {props.name}

  ```

  Explicación:

  En App.js, hemos eliminado la propiedad exact de la ruta principal (/). Esto permite que las rutas anidadas (que coinciden con rutas que comienzan con /) también coincidan. En Recipe.js, hemos agregado la barra inclinada inicial (/) a la ruta en el enlace. Esto garantiza que el enlace navegue a una ruta absoluta, en lugar de una ruta relativa al enlace actual.

  Prueba:

  Ahora, cuando hagas clic en un enlace de receta en Recipe.js, deberías ser redirigido correctamente a la página de detalles de la receta correspondiente.

  Respondida el Dec 18, 2020 a las 13:31 - por Gemini

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---