Estoy siguiendo este tutorial de YouTube de JavaBrains https://www.youtube.com/watch?v=4iM7eEl3Rag&list=PLqq-6Pq4lTTa8V613TZhGq4o8hSgkMGQ0&index=9&t=292s

Todo va bien hasta que implementa el BrowserRouter. El caso es que copio exactamente lo que está haciendo pero desafortunadamente me sale una página en blanco, no importa lo que cambie, sigue en blanco. ¿Alguna idea de cómo resolverlo? He preguntado también en el canal pero sin respuesta. ¡Gracias! La URL será: localhost:3000/equipos/xxx

Este es el fragmento de código de App.js

 import './App.css'; import { BrowserRouter as Router, Route } from 'react-router-dom'; import { TeamPage } from './pages/TeamPage'; function App() { return ( <div className="App"> <Router> <Route path="/teams/:teamName"> <TeamPage /> </Route> </Router> </div> ); } export default App;

y este es el TeamPage.js

 import { React, useEffect, useState } from "react"; import { useParams } from "react-router-dom"; import { MatchDetailCard } from "../components/MatchDetailCard"; import { MatchSmallCard } from "../components/MatchSmallCard"; export const TeamPage = () => { const [team, setTeam] = useState({ matches: [] }); const { teamName } = useParams(); useEffect( () => { const fetchMatches = async () => { const response = await fetch(`http://localhost:8080/api/team/${teamName}`); const data = await response.json(); setTeam(data); }; fetchMatches(); }, [teamName] //This empty array as a second argument tells: Call useEffect only when something inside change ); if(!team || !team.teamName) { return <h1>Team Not Found</h1> } return ( <div className="TeamPage"> <h1>{team.teamName}</h1> <MatchDetailCard teamName={team.teamName} match={team.matches[0]} /> {team.matches.slice(1).map((match) => <MatchSmallCard teamName={team.teamName} match={match} /> )} </div> ); }; export default TeamPage;

Espero que me puedas ayudar!!!