Tengo un pequeño problema con el enrutamiento, mi enrutamiento funciona según lo previsto, sin embargo, hay una pequeña peculiaridad que no puedo resolver.
Tengo dos rutas:
domain.comdomain.com/logs En domain.com tengo el siguiente encabezado.
<nav className="space-x-4"> <Link to="/"> <LinkButton btnText="Home" /> </Link> <Link to="/logs"> <LinkButton btnText="Logs" /> </Link> </nav> Hacer clic en estos enlaces funciona bien como se esperaba. Sin embargo, cuando estoy en domain.com/logs y actualizo la página, obtengo un 404. A continuación se muestra cómo configuré mi enrutamiento.
import Logs from './routes/Logs' const root = ReactDOM.createRoot(document.getElementById('root')) root.render( <BrowserRouter> <Routes> <Route path="/" element={<App />} /> <Route path="/logs" element={<Logs />} /> </Routes> </BrowserRouter> )Me encontré con este enlace: https://vercel.com/docs/concepts/edge-network/frequently-asked-questions#why-do-i-see-a-404-error-when-accessing-my-deployment
Estoy construyendo desde todo el directorio, por lo que debería incluir la carpeta de routes .
Ahora no estoy seguro de si esto tiene algo que ver con Vercel o Vite. Cualquier sugerencia seria genial. También para tener en cuenta esto ... funciona perfectamente localmente, por lo que debe ser una cuestión de compilación.
El index.html que sirve a su sitio web cuando visita domain.com también necesita ser servido cuando visita domain.com/logs , entonces su enrutamiento del lado del cliente funcionará.
El enrutador de reacción mostrará su aplicación en su estado correcto.
Puede encontrar más información aquí que describe las implementaciones con enrutamiento del lado del cliente https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing
No estoy familiarizado con vercel, pero probablemente tendrán una opción de comodín para servir el documento de índice para cualquier ruta no resuelta.