React Route Dom v6.4 - network path - as localhost is working fine

Richard C 0
Viewed 23

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"));
root.render(
<React.StrictMode>
<BrowserRouter basename={"/tas/sas-travel-events"}>
  <App />
</BrowserRouter>
</React.StrictMode>
);

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

enter image description here

react-router-dom reactjs
1 Answers

The basename property is passed when configuring the router.

See createBrowserRouter type declaration

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

Example:

const router = createBrowserRouter(
  [
    ... all your routes here ...
  ],
  {
    basename: "/tas/sas-travel-events",
  },
);
Drew Reese0
Related