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();
});
}
}
}