'React router dom v6 omits existing pathname and search while matching route

We have a website which has multiple apps and when an app is loaded the initial url is something like https:abc.com/alphabet/initial/index.php?controller=index&action=index&app=learnenglish

I've set up my learnenglish app like this

<BrowserRouter>
    <Routes>
        <Route path="/" element={<Layout />}>
            <Route index element={<Home />} />
            <Route path="grammar" element={<Grammar />} />
        </Route>
    </Routes>
</BrowserRouter>

My expectation is react router starts from this initial url as the base. But I'm getting No routes matched location "/alphabet/initial/index.php?controller=index&action=index&app=learnenglish"

What am I missing?

Dependencies

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "6"


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source