preactjs / preact-router

:earth_americas: URL router for Preact.

Home Page:http://npm.im/preact-router

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Does not work on Vercel

alfawal opened this issue · comments

I've just tried this package and it seemed fine.
Then I deployed my app on Vercel.
Visiting /admin gives me a 404 error that is handled by Vercel itself (not my <Page404 />).

app.jsx:

export function App() {
  return (
    <Router>
      <Page404 default />
      <Home path="/" />
      <Admin path="/admin" />
    </Router>
  );
}

main.jsx:

render(
  <>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  </>,
  document.getElementById("app")
);

The 404 error on Vercel when visiting /admin.
image

By default preact-router runs on the client in the browser. To make vercel be aware that you're hosting an SPA they need a custom redirect to redirect all routes to index.html. Their docs have an example on how to do that: https://vercel.com/docs/concepts/projects/project-configuration#legacy-spa-fallback