From 349f8c9d8c5082016362e873c54e91adb75563a7 Mon Sep 17 00:00:00 2001 From: gitstart-storybook Date: Wed, 7 Jun 2023 06:27:18 +0000 Subject: [PATCH 01/13] fix: nextjs next/navigation#useParams returns null --- .../src/routing/app-router-provider.tsx | 87 ++++++++++++------- .../Navigation.stories.jsx | 26 ++++++ 2 files changed, 81 insertions(+), 32 deletions(-) diff --git a/code/frameworks/nextjs/src/routing/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/app-router-provider.tsx index e285d5dbe2a..ab09406a14d 100644 --- a/code/frameworks/nextjs/src/routing/app-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/app-router-provider.tsx @@ -2,6 +2,7 @@ import React from 'react'; import type { LayoutRouterContext as TLayoutRouterContext, AppRouterContext as TAppRouterContext, + GlobalLayoutRouterContext as TGlobalLayoutRouterContext, } from 'next/dist/shared/lib/app-router-context'; import type { PathnameContext as TPathnameContext, @@ -21,17 +22,21 @@ let AppRouterContext: typeof TAppRouterContext; let LayoutRouterContext: typeof TLayoutRouterContext; let PathnameContext: typeof TPathnameContext; let SearchParamsContext: typeof TSearchParamsContext; +let GlobalLayoutRouterContext: typeof TGlobalLayoutRouterContext; try { AppRouterContext = require('next/dist/shared/lib/app-router-context').AppRouterContext; LayoutRouterContext = require('next/dist/shared/lib/app-router-context').LayoutRouterContext; PathnameContext = require('next/dist/shared/lib/hooks-client-context').PathnameContext; SearchParamsContext = require('next/dist/shared/lib/hooks-client-context').SearchParamsContext; + GlobalLayoutRouterContext = + require('next/dist/shared/lib/app-router-context').GlobalLayoutRouterContext; } catch { AppRouterContext = React.Fragment as any; LayoutRouterContext = React.Fragment as any; PathnameContext = React.Fragment as any; SearchParamsContext = React.Fragment as any; + GlobalLayoutRouterContext = React.Fragment as any; } type AppRouterProviderProps = { @@ -52,44 +57,62 @@ const getParallelRoutes = (segmentsList: Array): FlightRouterState => { const AppRouterProvider: React.FC = ({ children, action, routeParams }) => { const { pathname, query, segments = [], ...restRouteParams } = routeParams; + const tree: FlightRouterState = [pathname, { children: getParallelRoutes([...segments]) }]; + + // https://github.com/vercel/next.js/blob/canary/packages/next/src/client/components/app-router.tsx#L436 return ( - { - action('nextNavigation.refresh')(); - }, - ...restRouteParams, - }} - > + - - {children} - + { + action('nextNavigation.refresh')(); + }, + ...restRouteParams, + }} + > + + {children} + + + - + ); }; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/Navigation.stories.jsx b/code/frameworks/nextjs/template/stories_nextjs-default-js/Navigation.stories.jsx index 12b66e3205d..166567aa456 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-js/Navigation.stories.jsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-js/Navigation.stories.jsx @@ -2,6 +2,7 @@ import { useRouter, usePathname, useSearchParams, + useParams, useSelectedLayoutSegment, useSelectedLayoutSegments, } from 'next/navigation'; @@ -11,6 +12,7 @@ function Component() { const router = useRouter(); const pathname = usePathname(); const searchParams = useSearchParams(); + const params = useParams(); const segment = useSelectedLayoutSegment(); const segments = useSelectedLayoutSegments(); @@ -58,6 +60,16 @@ function Component() { ))} +
+ params:{' '} +
    + {Object.entries(params).map(([key, value]) => ( +
  • + {key}: {value} +
  • + ))} +
+
{routerActions.map(({ cb, name }) => (