1

Tengo una aplicación web en React JS la cual contiene varias paginas, para navegar entre ellas he creado un archivo Routes.js, al recargar (F5) las paginas en local no hay ningún problema, pero al estar el sitio en producción y recargarlas muestra el error 404. Entiendo que este error lo arroja porque al recargar la pagina estoy haciendo la petición al servidor, pero mis rutas no se encuentran en el backend, sino en el frontend.

He leido que una posible solucion es cambiar BrowserRouter por Hashrouter pero eso agregará un # en mis urls lo cual no se ve muy bien , pero supuestamente funciona.

Solo cambié esto

import {HashRouter as Router,Switch,Route} from 'react-router-dom';

Lo intenté pero ya no me muestra nada y ahora mi url se ve asi:

http://localhost:3000/mysite#/ y la página en blanco

lo he editado manual asi:

http://localhost:3000/#/mysite

Asi si funciona pero como puedo hacer dicha configuracion?

Entonces quiero hacerlo en mi backend pero no he podido encontrar como. Mi backend esta en ASP.NET Core 3.1.

Aqui dejo mi archivo Routes.js

import React from 'react';
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom';
import Login from '../pages/Login.jsx';
import App from '../pages/App.jsx';
import Registro from '../pages/Registro.jsx';
import Nuevo from '../pages/muestreos/Nuevo.jsx';
import Analisis from '../pages/Analisis/Analisis.jsx';
import Resultados from '../pages/Analisis/Resultados.jsx';


function Routes() {
 const rutaServer="/MySite"; 

  return (
    <Router>  
      <Switch>
          <Route exact path={rutaServer+"/nuevo"}>
           <Nuevo />
         </Route>         
         <Route exact path={rutaServer+"/analisis"}>
           <Analisis />
         </Route>
         <Route exact path={rutaServer+"/resultados"}>
           <Resultados />
         </Route>        
         <Route exact path={rutaServer+"/registro"}>
           <Registro />
         </Route> 
         
         <Route exact path={rutaServer+"/index"}>
           <App />
         </Route>  
         <Route exact path={rutaServer}>
           <Login />
         </Route> 
            
     </Switch>
    </Router>
  );   
}

export default Routes;

My startup.cs (imagino que aqui podría aplicar la lógica para controlar esto)

    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors();
            services.AddControllers();
            services.AddDbContext<AppDbContext>(options => options.UseSqlServer(Configuration.GetConnectionString("conexion")));
           
            services.AddControllers().AddNewtonsoftJson();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            //Cors
            app.UseCors(options =>
            {
                options.AllowAnyHeader();
                options.AllowAnyMethod();
                options.AllowCredentials();
                options.AllowAnyOrigin();  
                options.WithOrigins("https://www.mysite.mx/MyApI");  
                options.WithOrigins("http://localhost:3000"); 
            });

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseHttpsRedirection();

            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
        }
    }
}

1 respuesta 1

0

Puedes reemplazar tu BrowserRouter a HashRouter para que las rutas de react-router-dom no hagan conflictos con las rutas del backend.

En fin, puedes dejarlo de esta manera:

import { HashRouter as Router, Switch, Route } from 'react-router-dom';
1
  • No me ha funcionado, he actualizado mi pregunta el 17 jun. 2021 a las 20:51

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.