[Bug]: route specific components are not rendering if the app is configured to run at different base path using a webmanifest file

[arunkumar413]

What version of React Router are you using?

6

Steps to Reproduce

Hi Team,

Below is my react router config. But when I visit the /dist/index the components are not rendering. The server is configured to serve at dist/index.html through a webmanifest file. However the app isn't rendering. I'm not able to replicate this in codesandbox as the app is running on this experimental web based OS called nutria ( https://github.com/capyloon/nutria )

Any idea on the respective components doesn't render for the routes?

router config:

export const AppRouter = createBrowserRouter(
  [
    {
      path: "dist/index",
      element: <Home />,
    },
    {
      path: "dist/about",
      element: <About />,
    },
    {
      path: "dist/contact",
      element: <Contact />,
    },
  ]

);

webmanifest file:

{
  "name": "hello-123",
  "description": "This app is to test the working of router on nutria",
  "start_url": "dist/index.html",
  "icons": [
    {
      "src": "/icons/default.svg",
      "type": "image/svg",
      "sizes": "any"
    }
  ],
  "background_color": "#ffffff",
  "b2g_features": {
    "core": true,
    "developer": {
      "name": "The Capyloon team"
    }
  },
  "version": "1.0"
}

Expected Behavior

The route specific components should render.

Actual Behavior

The bundle script is loading. But the route specific components are not rendering.

[timdorr]

What are the contents of window.location in this environment when you start the page? We use that to determine the initial location and start matching paths.

react-router/packages/router/history.ts

Line 367 in a04ae6b

let { pathname, search, hash } = window.location;

[arunkumar413]

@timdorr Seems like the path with /dist/index is causing some issue. I'm still troubleshooting and will comeback with more details.

// this one is not working. Throwing an error in the console the error points to some code in the console.
 {
      path: "dist/index",
      element: <Home />,
    }

// This one is working as expected. 
      {
      path: "/dist/home",
      element: <Home />,
    }
    ```

[arunkumar413]

@timdorr I just changed the path value to /dist/home and tried again. This time it logged an error

Uncaught Error: Minified React error #299; visit https://reactjs.org/docs/error-decoder.html?invariant=299 

The error further points to the below code snippet in the bundle:

qe.createRoot = function(e, t) {
    if (!Ka(e))
        throw Error(T(299)); // throws error here
    var n = !1
      , r = ""
      , l = vp;
    return t != null && (t.unstable_strictMode === !0 && (n = !0),
    t.identifierPrefix !== void 0 && (r = t.identifierPrefix),
    t.onRecoverableError !== void 0 && (l = t.onRecoverableError)),
    t = Va(e, 1, !1, null, null, n, !1, r, l),
    e[zt] = t.current,
    ul(e.nodeType === 8 ? e.parentNode : e),
    new Qa(t)
}

const K0 = N0([{
    path: "/dist/home",
    element: ie.jsx(V0, {})
}, {
    path: "/dist/about",
    element: ie.jsx(H0, {})
}, {
    path: "/dist/contact",
    element: ie.jsx(Q0, {})
}]);
Gi.createRoot(document.getElementById("root")).render(ie.jsx(na.StrictMode, {
    children: ie.jsx(dg, {
        store: Qy,
        children: ie.jsx(U0, {
            router: K0
        })
    })
}));

[timdorr]

That's an error caused by document.getElementById("root") not finding an element. That doesn't have anything to do with React Router.

My suspicion is that you need to find the right combination of basename and start_url to make this load correctly. This isn't a bug with React Router, just a matter of configuring your application correctly.

[arunkumar413]

@timdorr Totally agree. We're using a simple server for testing. That might be causing the issue.

I would like to use the start_url as dist/home.html. in this case what should be the basename? Because having dist/home.hmtl as the start_url the server might be trying to serve html file instead of a react component.