useMatches hook not returning data from my route handle

[preacher2041]

Hi there, I'm trying to build a breadcrumb component using the new useMatches hook in React Router 6.4 but I'm running into an issue where the handles I define on my routes aren't being returned by the useMatches hook (handle: undefined)

My code looks a little like this...

App Routes.tsx

export const AppRoutes = () => {
	const { data: session } = useFetchSessionQuery();

	const ProtectedRoute = (props: any) => {
		const { children, session } = props;

		if (!session) {
			return <Navigate to='/auth/login' replace />;
		}

		return children;
	};

	const router = createBrowserRouter(
		createRoutesFromElements(
			<>
				<Route
					path='/*'
					element={
						<ProtectedRoute session={session}>
							<ProtectedRoutes />
						</ProtectedRoute>
					}
				/>
				<Route path='/auth/login/*' element={<PublicRoutes />} />
			</>
		)
	);

	return (
		<AppProvider>
			<RouterProvider router={router} />
		</AppProvider>
	);
};

PublicRoutes.tsx

const AuthRoutes = lazy(() =>
	import('@/features/auth').then(({ AuthRoutes }) => ({ default: AuthRoutes }))
);

export const PublicRoutes = () => {
	return (
		<Routes>
			<Route path='/*' element={<AuthRoutes />} />
		</Routes>
	);
};

ProtectedRoutes.tsx

const Dashboard = lazy(() =>
	import('@/features/misc').then(({ Dashboard }) => ({ default: Dashboard }))
);

const Feature1 = lazy(() =>
	import('@/features/Feature1').then(({ Feature1 }) => ({
		default: Feature1,
	}))
);

const PrivateRoutes = () => {
	return (
		<MainLayout>
			<Suspense
				fallback={
					<div className='h-screen w-screen flex items-center align-middle justify-center'>
						<Spinner size='xl' variant='light' />
					</div>
				}
			>
				<Outlet />
			</Suspense>
		</MainLayout>
	);
};

export const ProtectedRoutes = () => {
	return (
		<Routes>
			<Route
				path='/'
				element={<PrivateRoutes />}
				handle={{ crumb: () => <span>Index</span> }}
			>
				<Route
					index
					element={<Dashboard />}
					handle={{ crumb: () => <span>Dashbaord</span> }}
				/>
				<Route
					path='/feature1/*'
					element={<Feature1 />}
					handle={{ crumb: () => <span>Feature 1</span> }}
				/>
			</Route>
		</Routes>
	);
};

Feature1.tsx

export const Feature1 = () => {
	return (
		<Routes>
			<Route
				path='/'
				element={<Feature1Container />}
				handle={{ crumb: () => <span>Feature 1 Contact</span> }}
			/>
			<Route
				path='/:feature1_identifier'
				element={<Feature1Details />}
				handle={{ crumb: () => <span>Feature 1 Detail</span> }}
			/>
		</Routes>
	);
};

To explain the code above slightly, I have the toplevel AppRoutes.tsx which contains the createBrowserRouter / createRoutesFromElements bits, this renders either the public auth routes if the user isn't authenticated or the Protected Routes if they are.

The protected routes then import defined routes from each indivudual feature, which is a paradigm I prefer as I like to keep all code related to a feature in one place.

I'm wondering wether the <Routes /> component is causing issues with useMatches though I can't find any info as to why it would.

[brophdawg11]

Yep, you've identified the underlying issue :). Descendant routes are not known to useMatches (docs) since matching in a RouterProvider is done before rendering, and descendant <Routes> are not discovered until rendering.

The recommendation would be to lift your route definitions up to the initial route tree and then use code splitting to lazily load the loaders/actions/elements for those routes. There's a good community article on this here.

Then you can check for protected routes in your loaders. For now, you'll want to check in each loader until this proposal gets implemented and then you will be able to check for your protected routes in a single parent beforeLoader-type function.

[preacher2041]

Great, thanks for the reply, that makes sense!