[SOLVED] React Route Dom v6.4 – network path – as localhost is working fine


This Content is from Stack Overflow. Question asked by Richard C

Citizen dev attempting this.
I have everything working fine with “react-router-dom”: “^6.4.0” in localhost…
But when I npm run build and deploy the build contents to a server http://sww.acme.com
in the directory /tas/travel-events/
So it’s now http://blah.acme.com/tas/travel-events/

Every time I go to the root it renders the error page.

path: "/",
element: <Layout />,
errorElement: <Error />,

I’m following the syntax of the tutorial.https://reactrouter.com/en/main/start/tutorial
There are no network errors delivering the content.

enter image description here

What’s a little strange is that in a previous attempt before attempting the tutorial method, I tried a different way and it seemed to work, so if the answer is in the basename how do I insert that into the syntax below…

const root = ReactDOM.createRoot(document.getElementById("root"));
<BrowserRouter basename={"/tas/sas-travel-events"}>
  <App />

Here’s the contents of the travel-events network directory

enter image description here


The basename property is passed when configuring the router.

See createBrowserRouter type declaration

function createBrowserRouter(
  routes: RouteObject[],
  opts?: {
    basename?: string;
    window?: Window;
): RemixRouter;


const router = createBrowserRouter(
    ... all your routes here ...
    basename: "/tas/sas-travel-events",

This Question was asked in StackOverflow by Richard C and Answered by Drew Reese It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?