0

Hola, he creado un proyecto en React que consume una API de nodejs y express. Todo funciona muy bien en local pero al subirla a producción sucede que la pagina abre correctamente y se puede usar sin recargarla pero al recargar la página en cualquier ruta que no sea la principal (/) Link: https://frases-app-dan.herokuapp.com , muestra este error:

Cannot GET /auth/login

Cannot GET /my-account

pueden probar entrando y recargando la página
No sé cuál sea el problema, en diferentes hostings sucede lo mismo, en local va perfecto al 100%

AppRouter.js

export const AppRouter = () => {

   const { checking, uid} = useSelector(state => state.auth);
   const dispatch = useDispatch();

   //cada vez que se cargue el componente se ejecutará el dispatch que verificara si el token es válido o no
   useEffect(() => {
       
           dispatch( startChecking() );

   }, [dispatch])
   //mientras verifica el token muestra un spinner de carga
   if( checking ) {
       return(
           <div className="flexible">
               <div className="sk-chase">
                   <div className="sk-chase-dot"></div>
                   <div className="sk-chase-dot"></div>
                   <div className="sk-chase-dot"></div>
                   <div className="sk-chase-dot"></div>
                   <div className="sk-chase-dot"></div>
                   <div className="sk-chase-dot"></div>
               </div>
           </div>
       )
   }

   return (
       <Router>
           <Switch>

               <PublicRoute
                   isAuthenticated={!!uid}
                   path="/auth"
                   component={ AuthRouter }
               />

               <PrivateRoute
                   isAuthenticated={!!uid}
                   exact
                   path="/"
                   component={ HomeScreen }
               />

               <PrivateRoute
                   isAuthenticated={!!uid} 
                   exact
                   path="/my-account"
                   component={ MyAccount }
               />

               <Redirect to="/auth/login" />

           </Switch>
           <Footer />
       </Router>
   )
}

index.js (Node + express)

const express = require('express');
const path = require('path');
//dotenv para usar variables de entorno 
require('dotenv').config();
const cors = require('cors');
const { dbConnection } = require('./database/config');

//crear servidor de express
const app = express();

//Base de datos
dbConnection();
//CORS
app.use(cors());

//Directorio Público
app.use( express.static('public') );

//lectura y paseo del body
app.use( express.json() );

//****RUTAS****
//auth // crear, login, renew
app.use( '/api/auth', require('./routes/auth') );
//phrases: crear, leer, actualizar, borrar
app.use( '/api/phrases', require('./routes/phrases') );

//Escuchar peticiones
app.listen( process.env.PORT, () => {
    console.log(`Servidor coriendo en puerto ${ process.env.PORT }`)
} )

Agradecería ayuda!

6
  • tu api esta en producción igual?
    – OsAndNoTi
    el 23 mar. 2021 a las 21:36
  • Si, es un MERN aunque ya solucioné el error buscando mucho
    – Dan
    el 23 mar. 2021 a las 21:59
  • Entonces deberías publicar tu solucion como una respuesta a tu misma pregunta... así ayudas a los demás que puedan tener el mismo problema
    – Pipe
    el 23 mar. 2021 a las 22:00
  • Publicada, saludos!
    – Dan
    el 23 mar. 2021 a las 22:06
  • @DanielDiaz no le coloques solucionado al título así no funciona la plataforma, con publicar tu respuesta alcanza
    – BetaM
    el 23 mar. 2021 a las 22:10

1 respuesta 1

0

SOLUCIÓN: Si ya tienes un servidor (backend) que estás usando, probablemente esta sea tu mejor opción. La idea principal aquí es que redirija todas las solicitudes de su servidor a /index.html. Cualquier solicitud que se realice a su servidor responderá con la página de índice (y luego obtendrá los recursos JS que necesite), React Router se hará cargo y cargará la vista adecuada. El código real para esto varía según el tipo de servidor que tenga
fuente: https://ui.dev/react-router-cannot-get-url-refresh/

Colocar en index.js en el backend (Node js + express)

app.get('/*', function(req, res) {
 res.sendFile(path.join(__dirname, 'ruta/a/tu/index.html'), function(err) {
  if (err) {
    res.status(500).send(err)
  }
})
})

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.