Fix: Added code fix for stop 2950 ticket- navigation issue for extra … (#2830)

* Fix: Added code fix for stop 2950 ticket- navigation issue for extra 'slug' property in TOC schema

* upgrade version of elements-dev-portal from 3.0.6 to 3.0.7

* The updated routing structure enables nested routes under the root path, allowing dynamic matching for both branch-specific and general project nodes. 

* The destructuring of route parameters using useParams efficiently extracts branchSlug and the wildcard nodeSlug for precise contextual rendering within nested components.

Author: SB-ChetanKorde

packages/elements-dev-portal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-dev-portal",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "UI components for composing beautiful developer documentation.",
   "keywords": [],
   "sideEffects": [

packages/elements-dev-portal/src/containers/StoplightProject.tsx

@@ -98,7 +98,10 @@ export interface StoplightProjectProps extends RoutingProps {
 }
 
 const StoplightProjectImpl: React.FC<StoplightProjectProps> = ({ projectId, collapseTableOfContents = false }) => {
-  const { branchSlug: encodedBranchSlug = '', nodeSlug = '' } = useParams<{ branchSlug?: string; nodeSlug: string }>();
+  const { branchSlug: encodedBranchSlug = '', '*': nodeSlug = '' } = useParams<{
+    branchSlug?: string;
+    '*': string;
+  }>();
   const branchSlug = decodeURIComponent(encodedBranchSlug);
   const navigate = useNavigate();
 
@@ -110,7 +113,7 @@ const StoplightProjectImpl: React.FC<StoplightProjectProps> = ({ projectId, coll
     isError,
     error: nodeError,
   } = useGetNodeContent({
-    nodeSlug,
+    nodeSlug: nodeSlug ?? '',
     projectId,
     branchSlug,
   });
@@ -171,7 +174,7 @@ const ProjectNode: React.FC<StoplightProjectProps> = ({
   tryItCredentialsPolicy,
   tryItCorsProxy,
 }) => {
-  const { branchSlug: encodedBranchSlug = '', nodeSlug = '' } = useParams<{ branchSlug?: string; nodeSlug: string }>();
+  const { branchSlug: encodedBranchSlug = '', '*': nodeSlug = '' } = useParams<{ branchSlug?: string; '*': string }>();
   const branchSlug = decodeURIComponent(encodedBranchSlug);
   const [isLoadingNode, isTocFetched, isError, nodeError, node] = useOutletContext<any>();
 
@@ -233,11 +236,8 @@ const StoplightProjectRouter = ({
   const InternalRoutes = () => (
     <Routes>
       <Route path="/" element={<StoplightProjectImpl {...props} />}>
-        <Route path="/branches/:branchSlug/:nodeSlug/*" element={<ProjectNode {...props} />} />
-
-        <Route path="/:nodeSlug/*" element={<ProjectNode {...props} />} />
-
-        <Route element={<ProjectNode {...props} />} />
+        <Route path="/branches/:branchSlug/*" element={<ProjectNode {...props} />} />
+        <Route path="/*" element={<ProjectNode {...props} />} />
       </Route>
     </Routes>
   );