React Router with ASP.NET Core Web API 6.0, route all non /api calls to react app

Question

I have a React App using React Router Dom, I have been trying to figure out how to get client-side routing working, if I load the web app normally everything works fine, and I can access different components at different URLs using react-router-dom.

But if I refresh or try and access the url to a routed component directly, the server returns 404 not found as its making a request not to my SPA but the server.

I was wondering how in a .net 6.0 Web api, how to route anything not beginning with /api to my SPA.

Thanks!

Jacob Stephenson · Accepted Answer · 2022-05-24 18:03:37Z

2

After lots of trial and error, adding

app.MapControllerRoute(
  name: "api",
  pattern: "/api/{controller=Home}/{id?}");

app.MapFallbackToFile("/index.html");

to Program.cs, I was able to have the fallback url map back to index.html

answered May 24, 2022 at 18:03

Jacob Stephenson

5824 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel Over a year ago

For some reason, I'm having this issue on Azure but not on localhost

Niksr Over a year ago

Finally! Thank you. app.MapFallbackToFile returns routing to the client-side, so works well together with app.UseDefaultFiles(), no URL rewrite on IIS and other heavy things required. Some more details here

Collectives™ on Stack Overflow

React Router with ASP.NET Core Web API 6.0, route all non /api calls to react app

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related