title: Getting 404 | Page Not found Nextjs
body: <p>I created my page routing with react-router v5 and everything works well. If I click on the link, it takes me to the page, but when I reload the page I get a &quot;404 | Page Not Found&quot; error on the page.</p>
  <pre><code>import React, { useEffect, useState } from 'react'
  import Home from './dexpages/Home'
  import {
    BrowserRouter,
    Routes,
    Route
  } from &quot;react-router-dom&quot;;
  import Dashboard from './dexpages/dashboard';
  import Swapping from './dexpages/swapping'
  import Send from './dexpages/send';
  import Airdrops from './dexpages/airdrops'
  
  function Main() {
    const [mounted, setMounted] = useState(false)
    useEffect(() =&gt; {
      if (typeof window !== &quot;undefined&quot;) {
        setMounted(true)
      }
    }, [])
  
    return (
      &lt;&gt;
        {mounted &amp;&amp;
          &lt;BrowserRouter&gt;
            &lt;div className=&quot;min-h-screen&quot; style={{ overflowX: 'hidden' }}&gt;
              &lt;Routes&gt;
                &lt;Route path=&quot;/airdrops&quot; element={&lt;Airdrops /&gt;} /&gt;
                &lt;Route path=&quot;/send&quot; element={&lt;Send /&gt;} /&gt;
                &lt;Route path=&quot;/swap&quot; element={&lt;Swapping /&gt;} /&gt;
                &lt;Route path=&quot;/dashboard&quot; element={&lt;Dashboard /&gt;} /&gt;
                &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
              &lt;/Routes&gt;
            &lt;/div&gt;
          &lt;/BrowserRouter&gt;
        }
      &lt;/&gt;
  
    )
  }
  
  export default Main;
  </code></pre>
  <p>This is my Main Component where I create all the routing.</p>
  <p><a href="https://i.stack.imgur.com/zGX9p.png" rel="nofollow noreferrer">This is the error I'm getting when I reload the page</a></p>