[docs] Improve product identifier

docs/pages/_app.js

@@ -35,6 +35,7 @@ import createEmotionCache from 'docs/src/createEmotionCache';
 import BackToTop from 'docs/src/modules/components/BackToTop';
 import findActivePage from 'docs/src/modules/utils/findActivePage';
 import FEATURE_TOGGLE from 'docs/src/featureToggle';
+import useRouterExtra from 'docs/src/modules/utils/useRouterExtra';
 
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
@@ -173,7 +174,8 @@ Tip: you can access the documentation \`theme\` object directly in the console.
 function AppWrapper(props) {
   const { children, emotionCache, pageProps } = props;
 
-  const router = useRouter();
+  const { asPathWithoutLang, isMuiBase, isMaterialUI, isJoyUI, isMuiSystem, ...router } =
+    useRouterExtra();
 
   React.useEffect(() => {
     loadDependencies();
@@ -186,18 +188,17 @@ function AppWrapper(props) {
     }
   }, []);
 
-  const asPathWithoutLang = router.asPath.replace(/^\/[a-zA-Z]{2}\//, '/');
   let productPages = pages;
-  if (asPathWithoutLang.startsWith('/base')) {
+  if (isMuiBase) {
     productPages = basePages;
   }
-  if (asPathWithoutLang.startsWith('/material-ui')) {
+  if (isMaterialUI) {
     productPages = materialPages;
   }
-  if (asPathWithoutLang.startsWith('/joy-ui')) {
+  if (isJoyUI) {
     productPages = joyPages;
   }
-  if (asPathWithoutLang.startsWith('/system') && FEATURE_TOGGLE.enable_system_scope) {
+  if (isMuiSystem && FEATURE_TOGGLE.enable_system_scope) {
     productPages = systemPages;
   }