从浏览器访问前端 SPA 链接时，后端触发找不到路由

Question

I have a working front-end single-page-application written in JS (ReactJS), and a working back-end in Phoenix (Elixir). Everything works out fine as long as navigation happens within the application. However, when I try to access a page in the SPA from the browser, I get a route error fired from Phoenix. For example:

no route found for GET /search (PhoenixApp.Router)

is what I get when I access http://localhost:4000/search from the browser.

When I access http://localhost:4000/search from the navigation inside the SPA, I get a working page from ReactJS.

So my question: How can I get ReactJS to get the page, rather than Phoenix?

Answer 1

The standard way to do this for Single-Page Applications is to serve the exact same thing on every GET route as you're serving on / . You can add a wildcard GET route to your Phoenix Router and point it to the same thing as the route for / . If / is served from PageController 's index function, you should add:

get "/*anything", PageController, :index