Issue

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.

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

Solution

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",
  },
);

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.