He estado aprendiendo acerca de React Router y me he encontrado con algunos problemas mientras intentaba implementar una creación de página dinámica basada en los slugs que recibo de mi llamada de búsqueda de API.

Básicamente, estoy tratando de redirigir al usuario a una nueva página después de hacer clic en un enlace: esta nueva página será un componente nuevo y haré una nueva llamada api en este componente con el slug como mi parámetro de búsqueda.

Sin embargo, estoy luchando para cambiar dinámicamente las páginas en función de las babosas.

Aquí está el componente (BoxScore.js) en el que realizo la búsqueda inicial y los datos de visualización:

 import React from "react"; import { useEffect, useState } from "react"; import { Link } from "react-router-dom"; const BoxScore = () => { const [users, setUsers] = useState([]); const [pageNumber, setPageNumber] = useState(1); useEffect(() => { fetch( `myfetchapihere.com` ) .then((response) => { return response.json(); }) .then((data) => { setUsers(data); console.log(data); setPageNumber(pageNumber); }); }, [pageNumber]); return ( <> {users.map((user) => ( <div className="column" key={user.id} id={user.id}> <div className="inner"> <div className="flex"> <h2 className="uk-text-small"> <Link to={user.slug} className="h2 link" id={user.slug}> {user.name} </Link> </div> </div></div> )} </>);

En mi App.js, he configurado el enrutador de reacción:

 <Routes> <Route path="boxscore/:slug" element={<BoxScore />}> <Route path=":slug" element={<OneScore />} /> </Route> </Routes>

Mi componente OneScore que no se procesa al hacer clic en el enlace que configuré en el componente Boxscore:

 import React from 'react' import BoxScore from './Boxscore' import { useParams } from "react-router"; import {useEffect} from 'react' function OneScore() { const { slug } = useParams(); useEffect(() => { // Fetch post using the postSlug console.log({slug}); }, [slug]); return ( <div> Hiii </div> ) } export default OneScore

EDITAR: he logrado que el enlace funcione gracias a los comentarios de @DrewReese; sin embargo, el único problema que queda ahora es que después de cambiar la URL a (por ejemplo, www.a.com/boxscore/ ), el componente 'OneScore' no se muestra en cambio, el mismo BoxScore permanece solo se cambia la URL.