title: Having troubles with react-router-dom
body: <p>I'm following this YouTube tutorial from JavaBrains
  <a href="https://www.youtube.com/watch?v=4iM7eEl3Rag&amp;list=PLqq-6Pq4lTTa8V613TZhGq4o8hSgkMGQ0&amp;index=9&amp;t=292s" rel="nofollow noreferrer">https://www.youtube.com/watch?v=4iM7eEl3Rag&amp;list=PLqq-6Pq4lTTa8V613TZhGq4o8hSgkMGQ0&amp;index=9&amp;t=292s</a></p>
  <p>Everything goes smooth and well until he implements the BrowserRouter. The thing is that I copy exactly what he's doing but unfortunately I get a blank page, not matter what I change it's still blank. Any ideas how to solve it? I have asked also in the channel but with no answer. Thanks!
  The url will be: localhost:3000/teams/xxx</p>
  <p>This is the piece of code of App.js</p>
  <pre><code>import './App.css';
  import { BrowserRouter as Router, Route } from 'react-router-dom';
  import { TeamPage } from './pages/TeamPage';
  
  function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Router&gt;
          &lt;Route path=&quot;/teams/:teamName&quot;&gt;
            &lt;TeamPage /&gt;
          &lt;/Route&gt;
        &lt;/Router&gt;
      &lt;/div&gt;
    ); 
  }
  
  export default App;
  </code></pre>
  <p>and this is the TeamPage.js</p>
  <pre><code>import { React, useEffect, useState } from &quot;react&quot;;
  import { useParams } from &quot;react-router-dom&quot;;
  import { MatchDetailCard } from &quot;../components/MatchDetailCard&quot;;
  import { MatchSmallCard } from &quot;../components/MatchSmallCard&quot;;
  
  export const TeamPage = () =&gt; {
  
    const [team, setTeam] = useState({ matches: [] });
    const { teamName } = useParams();
  
    useEffect(
      () =&gt; {
        const fetchMatches = async () =&gt; {
          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 &lt;h1&gt;Team Not Found&lt;/h1&gt;
    }
  
    return (
      &lt;div className=&quot;TeamPage&quot;&gt;
        &lt;h1&gt;{team.teamName}&lt;/h1&gt;
  
        &lt;MatchDetailCard teamName={team.teamName} match={team.matches[0]} /&gt;
        {team.matches.slice(1).map((match) =&gt; 
          &lt;MatchSmallCard teamName={team.teamName} match={match} /&gt;
        )}
      &lt;/div&gt;
    );
  };
  
  export default TeamPage;
  </code></pre>
  <p>Hope you can help meee!!!</p>