diff --git a/packages/solid-router/src/Matches.tsx b/packages/solid-router/src/Matches.tsx
index cf83c6b506..f9fa1d34f7 100644
--- a/packages/solid-router/src/Matches.tsx
+++ b/packages/solid-router/src/Matches.tsx
@@ -38,27 +38,27 @@ declare module '@tanstack/router-core' {
export function Matches() {
const router = useRouter()
- const pendingElement = router.options.defaultPendingComponent ? (
-
- ) : null
-
// Do not render a root Suspense during SSR or hydrating from SSR
const ResolvedSuspense =
router.isServer || (typeof document !== 'undefined' && router.ssr)
? SafeFragment
: Solid.Suspense
- const inner = (
-
- {!router.isServer && }
-
-
- )
+ const OptionalWrapper = router.options.InnerWrap || SafeFragment
- return router.options.InnerWrap ? (
- {inner}
- ) : (
- inner
+ return (
+
+
+ ) : null
+ }
+ >
+ {!router.isServer && }
+
+
+
)
}
@@ -74,8 +74,10 @@ function MatchesInner() {
select: (s) => s.loadedAt,
})
- const matchComponent = () =>
- matchId() ? : null
+ const matchComponent = () => {
+ const id = matchId()
+ return id ? : null
+ }
return (
diff --git a/packages/solid-router/src/RouterProvider.tsx b/packages/solid-router/src/RouterProvider.tsx
index 1f579a0a4f..7fee86bcf7 100644
--- a/packages/solid-router/src/RouterProvider.tsx
+++ b/packages/solid-router/src/RouterProvider.tsx
@@ -1,5 +1,6 @@
import { Matches } from './Matches'
import { getRouterContext } from './routerContext'
+import { SafeFragment } from './SafeFragment'
import type * as Solid from 'solid-js'
import type {
AnyRouter,
@@ -29,17 +30,15 @@ export function RouterContextProvider<
const routerContext = getRouterContext()
- const provider = (
-
- {children()}
-
- )
-
- if (router.options.Wrap) {
- return {provider}
- }
+ const OptionalWrapper = router.options.Wrap || SafeFragment
- return provider
+ return (
+
+
+ {children()}
+
+
+ )
}
export function RouterProvider<
diff --git a/packages/solid-router/tests/Matches.test.tsx b/packages/solid-router/tests/Matches.test.tsx
index b7242fed00..6f0f865a1b 100644
--- a/packages/solid-router/tests/Matches.test.tsx
+++ b/packages/solid-router/tests/Matches.test.tsx
@@ -1,15 +1,18 @@
import { expect, test } from 'vitest'
import { fireEvent, render, screen } from '@solidjs/testing-library'
+import { createContext, useContext } from 'solid-js'
import {
Link,
Outlet,
RouterProvider,
+ createMemoryHistory,
createRootRoute,
createRoute,
createRouter,
isMatch,
useMatches,
} from '../src'
+import { sleep } from './utils'
const rootRoute = createRootRoute()
@@ -122,3 +125,99 @@ test('when filtering useMatches by loaderData', async () => {
expect(await screen.findByText('Incorrect Matches -')).toBeInTheDocument()
})
+
+test('Matches provides InnerWrap context to route components', async () => {
+ const rootRoute = createRootRoute({
+ component: () => {
+ const contextValue = useContext(ctx)
+ expect(contextValue, 'Context is not provided').not.toBeUndefined()
+
+ return {contextValue}
+ },
+ })
+
+ const routeTree = rootRoute.addChildren([])
+ const router = createRouter({
+ routeTree,
+ })
+
+ const ctx = createContext()
+
+ const app = render(() => (
+ {
+ return (
+
+ {props.children}
+
+ )
+ }}
+ />
+ ))
+
+ const indexElem = await app.findByText('context-for-children')
+ expect(indexElem).toBeInTheDocument()
+})
+
+test('Matches provides InnerWrap context to defaultPendingComponent', async () => {
+ const rootRoute = createRootRoute({})
+ const indexRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/',
+ component: () => {
+ return (
+
+ link to home
+
+ )
+ },
+ })
+
+ const homeRoute = createRoute({
+ getParentRoute: () => rootRoute,
+ path: '/home',
+ loader: () => sleep(300),
+ component: () => Home page
,
+ })
+
+ const routeTree = rootRoute.addChildren([homeRoute, indexRoute])
+ const router = createRouter({
+ routeTree,
+ history: createMemoryHistory({
+ initialEntries: ['/'],
+ }),
+ })
+
+ const ctx = createContext()
+
+ const app = render(() => (
+ {
+ const contextValue = useContext(ctx)
+ expect(contextValue, 'Context is not provided').not.toBeUndefined()
+
+ return {contextValue}
+ }}
+ InnerWrap={(props) => {
+ return (
+
+ {props.children}
+
+ )
+ }}
+ />
+ ))
+
+ const linkToHome = await app.findByRole('link', {
+ name: 'link to home',
+ })
+ expect(linkToHome).toBeInTheDocument()
+
+ fireEvent.click(linkToHome)
+
+ const indexElem = await app.findByText('context-for-default-pending')
+ expect(indexElem).toBeInTheDocument()
+})
diff --git a/packages/solid-router/tests/RouterProvider.test.tsx b/packages/solid-router/tests/RouterProvider.test.tsx
new file mode 100644
index 0000000000..2bc3395515
--- /dev/null
+++ b/packages/solid-router/tests/RouterProvider.test.tsx
@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest'
+import { render } from '@solidjs/testing-library'
+import { createContext, useContext } from 'solid-js'
+import { createRootRoute, createRouter } from '../src'
+import { RouterProvider } from '../src/RouterProvider'
+
+describe('RouterProvider', () => {
+ it('should provide context through RouterProvider Wrap', async () => {
+ const ctx = createContext()
+
+ const rootRoute = createRootRoute({
+ component: () => {
+ const contextValue = useContext(ctx)
+ expect(contextValue, 'Context is not provided').not.toBeUndefined()
+
+ return {contextValue}
+ },
+ })
+
+ const routeTree = rootRoute.addChildren([])
+ const router = createRouter({
+ routeTree,
+ })
+
+ const app = render(() => (
+ {
+ return {props.children}
+ }}
+ />
+ ))
+
+ const indexElem = await app.findByText('findMe')
+ expect(indexElem).toBeInTheDocument()
+ })
+})