Logo

dev-resources.site

for different kinds of informations.

Routing in Umbraco Part 1: URL segments

Published at
5/30/2024
Categories
umbraco
dotnet
routing
cms
Author
hartviglarsen
Categories
4 categories in total
umbraco
open
dotnet
open
routing
open
cms
open
Author
13 person written this
hartviglarsen
open
Routing in Umbraco Part 1: URL segments

If you have ever paid attention to the URL structure of nodes in Umbraco while going hard at your various Umbraco endeavours, you might have noticed that URLs are generated based on a node's placement in the content tree followed by its name. Usually this poses no issue but what if you wanted to change how the URL is made?

Say, for example, that you have a blog and you would like the create date (year) of each post shown in the URL. How would you do this?

You could use one of the built-in property type aliases such as umbracoUrlName, as Umbraco will use that property instead of the node's name for the URL segment:

Textstring property with umbracoUrlName as the alias:

Image description

New URL:

Image description

However, who wants to do this for each blog posts?

Luckily Umbraco has some tricks up its sleeve and allows you to easily change how URLs behave by using your own URL providers.

Creating your own URL segment provider

Create a class that implements IUrlSegmentProvider. All the magic will take place in GetUrlSegment():

using Umbraco.Cms.Core.Models;
using Umbraco.Cms.Core.Strings;

namespace Adventures;

public class BlogPostUrlSegmentProvider : IUrlSegmentProvider
{
    private readonly IUrlSegmentProvider _segmentProvider;

    public BlogPostUrlSegmentProvider(IShortStringHelper shortStringHelper)
    {
        _segmentProvider = new DefaultUrlSegmentProvider(shortStringHelper);
    }

    public string? GetUrlSegment(IContentBase content, string? culture = null)
    {
        // Do code
    }
}
Enter fullscreen mode Exit fullscreen mode

By using _segmentProvider.GetUrlSegment(content, culture) we can get the current URL segment for the given node and its culture.

In order to prepend the year of the blog post to the URL, all you have to do is make sure content.CreateDate.Year is part the string that is returned.

CreateDate is used for simplicity's sake. Typically you would want a separate DateTime property to assign a publish date. Otherwise, a post that you started in December of a given year but is not published until January will have the previous year in the URL - and you might not want that :-)

public string? GetUrlSegment(IContentBase content, string? culture = null)
{
    if (content.ContentType.Alias != "blogPost")
        return null;

    var segment = _segmentProvider.GetUrlSegment(content, culture);

    return $"{content.CreateDate.Year}-{segment}";
}
Enter fullscreen mode Exit fullscreen mode

With the segment provider in place you can now register it:

using Umbraco.Cms.Core.Composing;

namespace Adventures;

public class BlogPostUrlComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
    {
        builder.UrlSegmentProviders()
            .Insert<BlogPostUrlSegmentProvider>();
    }
}
Enter fullscreen mode Exit fullscreen mode

If you have previously worked with custom URLs you might have experience with your own Content Finders. These are not required when only the segment is changed.

Build your solution and republish a relevant node in Umbraco and you will have an updated URL:

Image description

oh.. and if the node has previously been published, Umbraco will automatically created a redirect. Neat :-)

routing Article's
30 articles in total
Favicon
Mastering Nested Navigation in Flutter with `go_router` and a Bottom Nav Bar
Favicon
Understanding ShellRoute in go_router: Managing Shared Layouts Effectively
Favicon
How the Web Evolved: The Rise of Single Page Applications
Favicon
Introducing Humiris MoAI Basic : A New Way to Build Hybrid AI Models
Favicon
TanStack Router: The Future of React Routing in 2025
Favicon
Next.js: Dynamic Routing with API Integration.
Favicon
Learning Next.js 13 App Router: A Comprehensive Guide 🚀
Favicon
Organizing Your Routes Modularly and Automatically in Lithe
Favicon
Organizando Suas Rotas de Forma Modular e Automática no Lithe
Favicon
🗺️ Peta Jalan Laravel: Menjelajah Routing, Middleware, dan Controller (Indonesian Version)
Favicon
Working On a React / Python Flask Back End Web App.
Favicon
Vue.js for Beginners 2024 #VueJs Part 5 : A Complete Guide to Routing with Vue Router
Favicon
Mastering Routing Protocols with Cisco Packet Tracer: A Learning Experience
Favicon
Restful Routing - A Flask API Example
Favicon
Routing in React vs. Next.js: Extra Work or Easy Wins?
Favicon
Browser refresh on click of Home button using href
Favicon
Decorate the Symfony router to add a trailing slash to all URLs
Favicon
Routing in Umbraco Part 2: Content Finders
Favicon
Routing in Umbraco Part 1: URL segments
Favicon
Simplifying Network Administration: BGP Route Servers' Function in the Internet Ecosystem
Favicon
createBrowserRouter A step up from Switch
Favicon
Mastering Angular 17 Routing
Favicon
Snag the Current URL in SvelteKit (2024 Edition)
Favicon
Ensuring Type Safety in Next.js Routing
Favicon
Laravel 11: Health Check Routing Example
Favicon
Switch'in L2 mi L3 mü Olduğunun Öğrenilmesi
Favicon
Routing with React Router
Favicon
Routing implementation using PHP attributes
Favicon
What is Vinxi, and how does it compare to Vike?
Favicon
Fallback Routing with Axum

Featured ones: