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

[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.