In my ReactJs project I have implemented ReactRouter V6 there are multiple routes setup for the application for example I have following routes:

<Routes>
  <Route path="/welcome" element={<SingleArticleById layout={"docs"} articleId={47} />} /> 
  <Route path="/documentation/api/introduction/:endpoint/:articleSlug" element={<Article />} />
  <Route path="/documentation/api/:endpoint/:path" element={<SwaggerArticle />} />
  <Route path="/documentation/:sectionSlug/:articleSlug" element={<Article />} />
</Routes>

the application works fine if you remain in similar route pattern such as

/documentation/api/introduction/:endpoint/:articleSlug

but when you navigate to a different route pattern full application is reloaded as if its a fresh redirect to the application by browser and not navigated by react-router.

similarly if you keep browsing in

/documentation/:sectionSlug/:articleSlug

the application works fine, but when you go to different route pattern the app reloads.

please suggest a solution about this.