Search code examples
javascriptreactjsreact-router-dom

React Router Dom removes the url sub paths instead of adding the routing page

I have an asp.net MVC application that serves the React app under the following url: http://domain.fake/controller/action. Here is the routing of the react app:

<Routes>
 <Route path="/*" element={<Config />}>
   <Route path="values" element={<ConfigKeyValues />} />
 </Route>
</Routes>

When I try to navigate to the values route using the useNavigate hook:

const nav = useNavigate();
nav("values");

In the URL, instead of adding the /values path, the routing removes the whole controller/action path and only sets the /values path. So instead of getting the url http://domain.fake/controller/action/values, I'm getting http://domain.fake/values, and this is not right.

I'm able to display the component correctly, and I'm not being redirected by the server, but the url is wrong because I can't share that since it does not exist.

How can I prevent the React routing from replacing the base path but adding the new path to the url and displaying the component of that route?

Solution

  • To tell React Router Dom that your application is served from a subfolder, you could use the basename property, which works with createBrowserRouter as well as BrowserRouter:

    The basename of the app for situations where you can't deploy to the root of the domain, but a subdirectory.

    <BrowserRouter basename="/controller/action">
  {/* The rest of your app goes here */}
</BrowserRouter>

    createBrowserRouter(routes, {
  basename: "/controller/action",
});

    Side note, be aware that calling navigate("values"), without / at the beginning of "values" would take into account the path you are on and build on top of it as the doc says.