1

In my localhost testing environment, the URL "http://127.0.0.1:5173/mike/1/1/103" directs to the first route path and the params are read as expected. However in my deployed environment at "https://app-name.vercel.app/" if I have any text after ".app/" I'm getting a 404 error. If I remove the text after "app./" then it directs to this route:

<Redirect from="/" exact to="/mike" component={Stats} />

Here is my full code. I'm using an older version of react-router-dom (version 5.1.2).

import { useState } from "react";
import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import "./App.css";
import Stats from "./components/stats";
import NotFound from "./components/notFound";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <main className="container">
        <BrowserRouter>
          <Switch>
            <Route path="/:username/:win/:loss/:draw" component={Stats} />
            <Route path="/:username" component={Stats} />
            <Redirect from="/" exact to="/mike" component={Stats} />
            <Redirect to="/not-found" component={NotFound} />
          </Switch>
        </BrowserRouter>
      </main>
    </div>
  );
}

export default App;
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
John S
  • 386
  • 1
  • 3
  • 17
  • How is the server configured to handle requests? – Unmitigated Apr 08 '23 at 04:11
  • There's no server. It's a react app. I created it via npm create vite. Other than the code above and the stats component, I didn't change anything else besides adding react-router-dom. – John S Apr 08 '23 at 04:22
  • If you're deploying it somewhere and it can be accessed, there must be at least a [web server](https://en.wikipedia.org/wiki/Web_server)... – Unmitigated Apr 08 '23 at 04:23
  • Ok, yes, it's deployed to Vercel. I haven't configured anything. – John S Apr 08 '23 at 04:27
  • 1
    Try configuring it as `{ "rewrites": [ {"source": "/(.*)", "destination": "/"} ] }` – Unmitigated Apr 08 '23 at 04:31
  • Thank you, kindly! That led me to this page specifically about adding a vercel.json file with that code that solves the problem: https://stackoverflow.com/questions/64815012/why-does-react-router-not-works-at-vercel – John S Apr 08 '23 at 04:41

0 Answers0