Skip to content

SurfaceRouter

SurfaceRouter(props): Element

Conditionally renders components based on which surface the extension UI is currently rendering for the user.

In general, every extension should include exactly one SurfaceRouter component, and you should only include one `SurfaceRoute` from the @netlify/sdk/react!Surfaces | `Surfaces` enum.

ParameterTypeDescription
propsSurfaceRouterProps

Element

import { Surfaces } from "@netlify/sdk/react";
import { SurfaceRoute, SurfaceRouter } from "@netlify/sdk/react/components";
<SurfaceRouter>
<SurfaceRoute surface={Surfaces.SiteConfiguration}>
<SiteConfigurationSurface />
</SurfaceRoute>
<SurfaceRoute surface={Surfaces.TeamConfiguration}>
<TeamConfigurationSurface />
</SurfaceRoute>
</SurfaceRouter>