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 "404 | Page Not Found" error on the page.

import React, { useEffect, useState } from 'react'
import Home from './dexpages/Home'
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
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(() => {
    if (typeof window !== "undefined") {
      setMounted(true)
    }
  }, [])

  return (
    <>
      {mounted &&
        <BrowserRouter>
          <div className="min-h-screen" style={{ overflowX: 'hidden' }}>
            <Routes>
              <Route path="/airdrops" element={<Airdrops />} />
              <Route path="/send" element={<Send />} />
              <Route path="/swap" element={<Swapping />} />
              <Route path="/dashboard" element={<Dashboard />} />
              <Route path="/" element={<Home />} />
            </Routes>
          </div>
        </BrowserRouter>
      }
    </>

  )
}

export default Main;

This is my Main Component where I create all the routing.

This is the error I'm getting when I reload the page

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 "404 | Page Not Found" error on the page.

import React, { useEffect, useState } from 'react'
import Home from './dexpages/Home'
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
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(() => {
    if (typeof window !== "undefined") {
      setMounted(true)
    }
  }, [])

  return (
    <>
      {mounted &&
        <BrowserRouter>
          <div className="min-h-screen" style={{ overflowX: 'hidden' }}>
            <Routes>
              <Route path="/airdrops" element={<Airdrops />} />
              <Route path="/send" element={<Send />} />
              <Route path="/swap" element={<Swapping />} />
              <Route path="/dashboard" element={<Dashboard />} />
              <Route path="/" element={<Home />} />
            </Routes>
          </div>
        </BrowserRouter>
      }
    </>

  )
}

export default Main;

This is my Main Component where I create all the routing.

This is the error I'm getting when I reload the page

• javascript
• reactjs
• react-router
• next.js

• possibly related: stackoverflow.com/q/54815348/11107541 – starball Commented May 1, 2023 at 8:06

3 Answers 3

Don't use React Router with next.js.

Next.js has its own routing mechanism which is used for both client-side routing and server-side routing.

By using React Router, you're bypassing that with your own client-side routing so when you request the page directly (and depend on server-side routing) you get a 404 Not Found.

Next.js has a migration guide.

For me another instance of the app was running and I was trying to load the old instance.

Your paths need to be adjusted. For the home page it is fine to be routed to / however for the other pages there is no need for a backslash, remove the backslash from the Airdrops, Send, Swapping, and Dashboard paths respectively and you should be fine.

Try this below for each of the routes.

<Route path="airdrops" element={<Airdrops />} /> <Route path="send" element={<Send />} /> <Route path="swap" element={<Swapping />} /> <Route path="dashboard" element={<Dashboard />} /> <Route path="/" element={<Home />} />