1

tengo un inconveniente no se si alguien pudiera ayudarme esta es mi pagina y cuando voy a las rutas me cargan perfecto los componentes pero al dar al boton refrescar introducir la descripción de la imagen aquí

y dar al boton refrescar pagina me sale introducir la descripción de la imagen aquí

import './api.css'; import './App.css'; import React, { useEffect , Suspense} from 'react'; import { Inicio } from './components/Inicio' import { NavBar } from './components/layout/NavBar'; import { Footer } from './components/layout/Footer'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import store from './store'; import { loadUser } from './actions/user_actions'; import ProtectedRoutes from './routes/Protected_routes';

// Componentes dinámicos const Banner = React.lazy(() => import('./components/banner')); const AboutUs = React.lazy(() => import('./components/abouts_us')); const Services = React.lazy(() => import('./components/services/services')); const ServiceDetails = React.lazy(() => import('./components/services/service_details')); const Login = React.lazy(() => import('./components/users/login')); const Register = React.lazy(() => import('./components/users/register')); const Profile = React.lazy(() => import('./components/users/profile')); const UpdateProfile = React.lazy(() => import('./components/users/updateProfile')); const UpdatePassword = React.lazy(() => import('./components/users/updatePassword')); const ForgotPassword = React.lazy(() => import('./components/users/forgotPassword')); const ResetPassword = React.lazy(() => import('./components/users/resetPassword')); const Reviews = React.lazy(() => import('./components/reviews/reviews')); const Comentarios = React.lazy(() => import('./components/reviews/comentarios')); const Dashboard = React.lazy(() => import('./components/admin/dashboard')); const ServiceList = React.lazy(() => import('./components/admin/serviceList')); const NewService = React.lazy(() => import('./components/admin/service_new')); const UpdateService = React.lazy(() => import('./components/admin/updateService')); const SubcategorieNew = React.lazy(() => import('./components/admin/subcategorie_new')); const UpdateProduct = React.lazy(() => import('./components/admin/updateProduct')); const UserList = React.lazy(() => import('./components/admin/UserList')); const UpdateUser = React.lazy(() => import('./components/admin/updateUser')); const Employee = React.lazy(() => import('./components/admin/employee')); const ListReviews= React.lazy(()=> import('./components/admin/listReviews')) function App() { useEffect(() => { store.dispatch(loadUser()) }, []) return ( <Suspense fallback={

loading

}> <Route path='/' element={}> <Route path='/home' element={}> <Route path='/banner' element={}> <Route path='/about' element={}> <Route path='/services' element={}> <Route path='/service/:id' element={}> <Route path='/login' element={}> <Route path='/register' element={}> <Route path='/MyProfile' element={}> <Route path='/MyProfile/update' element={}> <Route path='/MyProfile/updatePassword' element={}> <Route path='/forgotPassword' element={}> <Route path='/resetPassword/:token' element={}> <Route path='/reviews' element={}> <Route path='/comentarios' element={}>

Si alguien me pudiera ayudar

1 respuesta 1

1

Para los que tienen el mismo error que yo asi lo solucione yo, hay que revisar nuestra configuración de nodeJs, Asi lo tenia yo

const express= require("express");
const path = require("path");
const cookieParser=require("cookie-parser")
const fileUpload=require('express-fileupload')
const bodyParser=require('body-parser')
const errorMiddleware=require("./middleware/error")
const rutas=require('./routes/routers');

const app= express();


app.use(express.json({limit : 52428800,extended : true}))
app.use(express.urlencoded({limit : 52428800,extended : true}))
app.use(bodyParser.urlencoded({extended:true, limit: 52428800}))
app.use(cookieParser());
app.use(fileUpload())


app.use(express.static(path.join(__dirname, '../fronted/build')));
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, '../fronted/build', 'index.html'));
});

//importo las rutas
app.use('/api', rutas)

//Middleware para manejar errores
app.use(errorMiddleware)

module.exports=app

y tenia que reorganizar mi codigo de esta manera y cambiar el app.get('/', (req, res) => { el "/" por "*"

app.use(express.static(path.join(__dirname, '../fronted/build')));

app.use('/api', rutas);

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../fronted/build', 'index.html'));
});

con esos cambios me funciono ya no me tira mas el error Cannot GET /home al refrescar la pagina. Espero que les funcione como a mi

4
  • Muy bien pero ¿Que significa "*" y porque se debe usar en vez de "/"?
    – g.4
    Commented el 14 feb. a las 16:17
  • @g.4 eso es lo que estaba pensando, no es un comodín para todas las rutas? Si es así no debería necesitar hacer eso Commented el 14 feb. a las 17:11
  • Me surgió esa duda @infinit3Loop__ por lo mismo que mencionaste, le di votos positivos a la respuesta de Michell porque si resolvió el problema pero espero que le de una doble revisión y agregue mas detalles, saludos
    – g.4
    Commented el 14 feb. a las 17:52
  • La solución es correcta ya que las rutas de express se setean de arriba hacia abajo entonces basicamente esta diciendo, si mi path inicial es /api los metodos son los que defino en rutas, para todo lo demás (*) que no esté listado anteriormente lo voy a responder enviando el archivo index.html
    – dukenicols
    Commented el 15 feb. a las 21:49

Tu Respuesta

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

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