el problema es que el cambio de URL ocurre antes de que el enlace obtenga un valor. Recibo el estado directamente a través del componente, pero antes de que eso suceda, ya se hizo clic en el componente. el valor se asigna después del cambio de URL, por lo que devuelve indefinido. ¿Cómo arreglaría esto?
import React, {useEffect, useState} from "react"; import "./Main.scss"; import CategoryWindow from "./CategoryWindow" import RecipeSelection from "./RecipeSelection"; import RecipeWindow from "./RecipeWindow"; import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom"; const Main =()=> { const [showElement, setShowElement] = useState("category"); const [selectedCategory, setSelectedCategory] = useState(); useEffect(()=> { if (selectedCategory) { setShowElement("recipeSelection") } }); return ( <> <main className="main"> <Router> <div> <div> {showElement === "category" ? <Link to={`/${selectedCategory}`}> <CategoryWindow passSelectedCategory={setSelectedCategory} /> </Link> : ''} </div> </div> </Router> </main> </> ) } export default Main;intente cambiar useEffect a esto para que no se vuelva a procesar cada milisegundo y ¿puede mostrar cómo se ve CategoryWindow?
useEffect(()=> { if (selectedCategory) { setShowElement("recipeSelection") } }, [selectedCategory]);No creo que un enlace deba colocarse directamente en un enrutador, pero si desea obtener la categoría del enlace en el componente CategoryWindow, puede obtenerla directamente del enlace sin pasar el estado seleccionado Categoría
Principal.js
<> <Router> <Route path="item"> <Route path=":category" element={<CategoryWindow />}/>} </Route> <Route path="/" element={<Component />}/>} </Router> </>CategoryWindow.js
import { useParams} from 'react-router-dom'; const { category} = useParams() <> <div>{category}</div> // this is the actual selectedCategory </>Componente.js
const [selectedCategory, setSelectedCategory] = useState(); <> <Link to={"/category/" + selectedCategory}/> </>pase [selectedCategory] como segundo argumento en useEffect.
useEffect(()=> { if (selectedCategory) { setShowElement("recipeSelection") } },[selectedCategory]);mira esto: Usando el Gancho de Efecto