Creé el enrutamiento de mi página con react-router v5 y todo funciona bien. Si hago clic en el enlace, me lleva a la página, pero cuando vuelvo a cargar la página aparece el error "404 | Página no encontrada".
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;Este es mi componente principal donde creo todo el enrutamiento.
No use React Router con next.js.
Next.js tiene su propio mecanismo de enrutamiento que se utiliza tanto para el enrutamiento del lado del cliente como para el enrutamiento del lado del servidor.
Al usar React Router, lo está pasando por alto con su propio enrutamiento del lado del cliente, por lo que cuando solicita la página directamente (y depende del enrutamiento del lado del servidor) obtiene un 404 No encontrado.
Next.js tiene una guía de migración .
Tus caminos necesitan ser ajustados. Para la página de inicio, está bien enrutar a / sin embargo, para las otras páginas no hay necesidad de una barra invertida, elimine la barra invertida de las rutas Airdrops, Send, Swapping y Dashboard respectivamente y debería estar bien.
Pruebe esto a continuación para cada una de las rutas.
<Route path="airdrops" element={<Airdrops />} /> <Route path="send" element={<Send />} /> <Route path="swap" element={<Swapping />} /> <Route path="dashboard" element={<Dashboard />} /> <Route path="/" element={<Home />} />
