A fyord component that renders on route match

fyord g p NewPage


RenderMode = RenderModes.Hybrid
Sets the render mode of the page - used during pre-rendering
RenderMode = RenderModes.Hybrid; /* Pre-renders, but still loads js */

RenderMode = RenderModes.Static; /* Pre-renders without a js bundle */

RenderMode = RenderModes.Dynamic; /* No pre-rendering */


abstract Route: (route: Route) => boolean
Sets the predicate by which a route match is determined. You may also set title and description and take other route resolution actions here.
/* Simple (home page) example */
Route = (route: Route) => route.path === '/';

/* Dynamic route - sets title and description when data available 404s when not */
Route = (route: Route) => {
const docsName = route.routeParams?.[1];
this.documentation = Docs.find(d => d.Name.toLowerCase() === docsName);

if (this.documentation) {
this.Title = this.documentation.Name;
this.Description = this.documentation.Description;

return route.path.startsWith('/docs') && !!this.documentation;


seoService: ISeoService = SeoService.Instance
Reference to the SeoService instance. Learn more about this service here.


Title: string = Strings.Empty
Sets the page title.


Description: string = Strings.Empty
Sets the meta description tag.


ImageUrl: string = Strings.Empty
Sets the meta image url tag. This is what most platforms use to display an image when linking to a webpage.


protected Layout?: () => Promise<Jsx>;
Implement this property to set a custom layout for the given page. When not implemented, the page will be rendered in the "default layout" defined at app start.