Vercel deployment - React Router

Every time i deploy with vercel i have to make a vercel.json file and add this

{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

so that routes dont mess up. Are there any alternative to this? or do i just have to do this everytime

7 Replies

barry•2y ago

never had to do it

ŘamboOP•2y ago

https://stackoverflow.com/questions/64815012/why-does-react-router-not-works-at-vercel 🤷‍♂️

Stack Overflow

Why does react-router not works at vercel?

I am trying to publish a serverless web to vercel. I want to use react-router and this works good on my computer but when I deploy it It doesn't works Can somebody help me? (I want to do it without

barry•2y ago

That's 2 years ago and an old version Are you using an old version?

ŘamboOP•2y ago

barry•2y ago

send your code for the router @Řambo

ŘamboOP•2y ago

function App() {
  const [isGameOver, setIsGameOver] = useState(false);
  const navbarRef = useRef<HTMLElement | null>(null);
  return (
    <Routes>
      <Route element={<Root isGameOver={isGameOver} navbarRef={navbarRef} />}>
        <Route index element={<Home />}></Route>
        <Route
          path="/level/:id"
          element={
            <Level
              isGameOver={isGameOver}
              setIsGameOver={setIsGameOver}
              navbarRef={navbarRef}
            />
          }
        ></Route>
      </Route>
      <Route path="*" element={<Error />}></Route>
    </Routes>
  );
}

function App() {
  const [isGameOver, setIsGameOver] = useState(false);
  const navbarRef = useRef<HTMLElement | null>(null);
  return (
    <Routes>
      <Route element={<Root isGameOver={isGameOver} navbarRef={navbarRef} />}>
        <Route index element={<Home />}></Route>
        <Route
          path="/level/:id"
          element={
            <Level
              isGameOver={isGameOver}
              setIsGameOver={setIsGameOver}
              navbarRef={navbarRef}
            />
          }
        ></Route>
      </Route>
      <Route path="*" element={<Error />}></Route>
    </Routes>
  );
}

barry•2y ago

weird yh same now never had to do that welp they did something since a while ago lol

Gaming

Programming

Vercel deployment - React Router