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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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