title: React Router Dom link not working properly - page not showing
body: <p>I'm pretty new to React. Can someone shed a light into what am I doing wrong here? Link is not working (it points to /tutorials but nothing changes).</p>
  <p>My app.js:</p>
  <pre><code>import &quot;./App.css&quot;
  import { Routes, Route } from 'react-router-dom';
  import { TutorialPage } from &quot;./pages/Tutorial&quot;;
  import { HomePage } from &quot;./pages/Homepage&quot;;
  
  export default function App() {
    return (
      &lt;&gt;
        &lt;HomePage /&gt;
          &lt;Routes&gt;
          &lt;Route exact path=&quot;/&quot; component={HomePage} /&gt;
          &lt;Route exact path=&quot;/tutorials&quot; component={TutorialPage} /&gt;
          &lt;/Routes&gt;
      &lt;/&gt;
    )
  }
  </code></pre>
  <p>My Homepage file:</p>
  <pre><code>import React from &quot;react&quot;;
  import { Hero } from &quot;../../components/Hero&quot;;
  import &quot;../../index.css&quot;
  import Features from &quot;../../components/Features&quot;;
  
  export function HomePage() {
    return (
      &lt;&gt;
      &lt;Hero&gt;&lt;/Hero&gt;
      &lt;Features /&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>And the Hero file, where <strong>Navbar with link to /tutorials</strong> is:</p>
  <pre><code>import React from &quot;react&quot;;
  import { Fragment } from 'react'
  import { Popover, Transition } from '@headlessui/react'
  import { MenuIcon, XIcon } from '@heroicons/react/outline'
  import &quot;../../index.css&quot;
  import { Link } from 'react-router-dom'
  
  const navigation = [
      { name: 'Features', href: '#features' },
      { name: 'Product', href: '#' },
      { name: 'Reviews', href: '#' },
      { name: 'Tutorials', href: '/tutorials' },
    ]
    
    export function Hero() {
      return (
        &lt;div className=&quot;relative bg-white overflow-hidden&quot;&gt;
          &lt;div className=&quot;max-w-7xl mx-auto&quot;&gt;
            &lt;div className=&quot;relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32&quot;&gt;
              &lt;svg
                className=&quot;hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-white transform translate-x-1/2&quot;
                fill=&quot;currentColor&quot;
                viewBox=&quot;0 0 100 100&quot;
                preserveAspectRatio=&quot;none&quot;
                aria-hidden=&quot;true&quot;
              &gt;
                &lt;polygon points=&quot;50,0 100,0 50,100 0,100&quot; /&gt;
              &lt;/svg&gt;
    
              &lt;Popover&gt;
                &lt;div className=&quot;relative pt-8 px-4 sm:px-6 lg:px-8&quot;&gt;
                  &lt;nav className=&quot;relative flex items-center justify-between sm:h-10 lg:justify-start&quot; aria-label=&quot;Global&quot;&gt;
                    &lt;div className=&quot;flex items-center flex-grow flex-shrink-0 lg:flex-grow-0&quot;&gt;
                      &lt;div className=&quot;flex items-center justify-between w-full md:w-auto&quot;&gt;
                        &lt;Link to=&quot;/&quot;&gt;
                          &lt;span className=&quot;sr-only&quot;&gt;FlixVPN&lt;/span&gt;
                          &lt;img className=&quot;w-16 sm:h-16&quot; src=&quot;/logo512.png&quot; /&gt;
                        &lt;/Link&gt;
                        &lt;div className=&quot;-mr-2 flex items-center md:hidden&quot;&gt;
                          &lt;Popover.Button className=&quot;bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-flixblue-500&quot;&gt;
                            &lt;span className=&quot;sr-only&quot;&gt;Open main menu&lt;/span&gt;
                            &lt;MenuIcon className=&quot;h-6 w-6&quot; aria-hidden=&quot;true&quot; /&gt;
                          &lt;/Popover.Button&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div className=&quot;hidden md:block md:ml-10 md:pr-4 md:space-x-8&quot;&gt;
                      {navigation.map((item) =&gt; (
                        &lt;Link
                          key={item.name}
                          to={item.href}
                          className=&quot;font-medium text-gray-500 hover:text-gray-900&quot;
                        &gt;
                          {item.name}
                        &lt;/Link&gt;
                      ))}
                      &lt;a href=&quot;#&quot; className=&quot;bg-flixblue-500 font-medium text-white p-3 rounded-md&quot;&gt;
                        Get app
                      &lt;/a&gt;
                    &lt;/div&gt;
                  &lt;/nav&gt;
                &lt;/div&gt;
    
                &lt;Transition
                  as={Fragment}
                  enter=&quot;duration-150 ease-out&quot;
                  enterFrom=&quot;opacity-0 scale-95&quot;
                  enterTo=&quot;opacity-100 scale-100&quot;
                  leave=&quot;duration-100 ease-in&quot;
                  leaveFrom=&quot;opacity-100 scale-100&quot;
                  leaveTo=&quot;opacity-0 scale-95&quot;
                &gt;
                  &lt;Popover.Panel
                    focus
                    className=&quot;absolute z-10 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden&quot;
                  &gt;
                    &lt;div className=&quot;rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden&quot;&gt;
                      &lt;div className=&quot;px-5 pt-4 flex items-center justify-between&quot;&gt;
                        &lt;div&gt;
                          &lt;img
                            className=&quot;h-8 w-auto&quot;
                            src=&quot;/logo512.png&quot;
                            alt=&quot;&quot;
                          /&gt;
                        &lt;/div&gt;
                        &lt;div className=&quot;-mr-2&quot;&gt;
                          &lt;Popover.Button className=&quot;bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-flixblue-500&quot;&gt;
                            &lt;span className=&quot;sr-only&quot;&gt;Close main menu&lt;/span&gt;
                            &lt;XIcon className=&quot;h-6 w-6&quot; aria-hidden=&quot;true&quot; /&gt;
                          &lt;/Popover.Button&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;px-2 pt-2 pb-3 space-y-1&quot;&gt;
                      {navigation.map((item) =&gt; (
                        &lt;Link
                        key={item.name}
                        to={item.href}
                        className=&quot;font-medium text-gray-500 hover:text-gray-900&quot;
                        &gt;
                        {item.name}
                        &lt;/Link&gt;
                    ))}
                      &lt;/div&gt;
                      &lt;a
                        href=&quot;#&quot;
                        className=&quot;block w-full px-5 py-3 text-center font-medium text-flixblue-600 bg-flixblue-600 rounded-md hover:bg-gray-100&quot;
                      &gt;
                        Log in
                      &lt;/a&gt;
                    &lt;/div&gt;
                  &lt;/Popover.Panel&gt;
                &lt;/Transition&gt;
              &lt;/Popover&gt;
    
              &lt;main className=&quot;mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28&quot;&gt;
                &lt;div className=&quot;sm:text-center lg:text-left&quot;&gt;
                  &lt;h1 className=&quot;text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-7xl&quot;&gt;
                    &lt;span className=&quot;block xl:inline&quot;&gt;The only VPN you need to&lt;/span&gt;{' '}
                    &lt;span className=&quot;block text-flixblue-500 xl:inline&quot;&gt;unblock Netflix&lt;/span&gt;
                  &lt;/h1&gt;
                  &lt;p className=&quot;mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0&quot;&gt;
                    High speed,  residential IP VPN that effectively &lt;span className=&quot;font-semibold text-flixblue-500&quot;&gt;unblocks Netflix, Hulu and other geo-restricted streaming services&lt;/span&gt;. Unblock a library of more than 50,000 movies and TV shows you've never seen before.
                  &lt;/p&gt;
                  &lt;div className=&quot;mt-5 sm:mt-8 inline-flex&quot;&gt;
                    &lt;img
                    className=&quot;w-auto h-20&quot;
                    src=&quot;/google-play-badge.png&quot;
                    /&gt;
                    
                    &lt;img
                    className=&quot;w-auto h-14 mt-3&quot;
                    src=&quot;/download-app-store.svg&quot;
                    /&gt;
                    
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/main&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className=&quot;lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2&quot;&gt;
            &lt;img
              className=&quot;h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full&quot;
              src=&quot;https://images.unsplash.com/photo-1512070679279-8988d32161be?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=876&amp;q=80&quot;
              alt=&quot;&quot;
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  <p>Page builds correctly everything works expect for the link. The /tutorials page is in place and only has a  which should show.</p>
  <p>Also, my root index.js file:</p>
  <pre><code>import React from 'react'; 
  import ReactDOM from 'react-dom'; 
  import './index.css'; 
  import App from './App'; 
  import reportWebVitals from './reportWebVitals'; 
  import { BrowserRouter } from &quot;react-router-dom&quot;;  
  
  ReactDOM.render(   
  &lt;React.StrictMode&gt;     
      &lt;BrowserRouter&gt;       
          &lt;App /&gt;   
      &lt;/BrowserRouter&gt;   
  &lt;/React.StrictMode&gt;,   
  
  document.getElementById(&quot;root&quot;) ); 
  </code></pre>