Route parameter with restricted values

Help Requests
1

I’m trying to figure out how to implement a route and capture a route parameter, but restrict the parameter values so as not to interfere with other routes.

This is what I want, where the timeline route will be any of 5 matches in the first route, and I need to know what that value is:

  configureRouter(config: RouterConfiguration, router: Router) {

    this.router = router;

    config.map([
      { route: ['', 'all', 'posts', 'comments', 'likes'], name: 'timeline', moduleId: PLATFORM.moduleName('./timeline/index'), nav: false, title: 'Timeline'},
      { route: [':slug'], name: 'content-post', moduleId: PLATFORM.moduleName('./content-post.component'), nav: false, title: 'Post'}
    ]);

  }

It would be nice if parameterized routes can defined restricted values, something like:

    config.map([
      { route: ['', ':viewType?: ["all", "posts", "comments", "likes"]'], name: 'timeline', moduleId: PLATFORM.moduleName('./timeline/index'), nav: false, title: 'Timeline'},
      { route: [':slug'], name: 'content-post', moduleId: PLATFORM.moduleName('./content-post.component'), nav: false, title: 'Post'}
    ]);

In the sub route views I can pluck that out:

./timeline/index:

    configureRouter(config: RouterConfiguration, router: Router) {

        this.router = router;

        config.map([
            // viewType = '', 'all', 'posts', 'comments', 'likes'
            { route: ['', 'all', 'posts', 'comments', 'likes'], name: 'home', moduleId: PLATFORM.moduleName('./timeline.component'), nav: false, title: 'Muckraker' }
        ]);

    }

./timeline/timeline.component:

    async activate(params: any, routeConfig: RouteConfig): Promise<any> {     
      this.viewType = params.viewType || 'all';
      return this.doStuff();
    }


    determineActivationStrategy() {
      return activationStrategy.invokeLifecycle;
    }
2

Hi @manks! I have an interesting proposal there:

It would be nice if parameterized routes can defined restricted values, something like:

Being realistic, I think that won’t be supported anytime soon as eventually we’ll want to migrate to the new URL Pattern API URL Pattern API - Web APIs | MDN, and your proposed pattern is still alien. There might be a way to have regex pattern coupled with capturing groups (thinking out loud here) to identify the named capturing group, as you have pointed out. Note that this is only applies for Au2 router(s), we might not have bandwidth to have that change for Au1 router.

Having said that, there are a couple of things you can try for now. The easiest thing might be to inspect the second (routeConfig: RouteConfig; you already know this) and the third (instruction: NavigationInstruction) argument to the activate method. I believe that using those, you can identify the path segment.

Another thing you can try is to create a custom routing pipeline hook, where you can check the route and redirect accordingly; there you can use the capturing group and a regex pattern and everything. Before redirecting, you can set a state variable that contains the path. Your view models can subscribe to the state to access the value of the viewType variable. Note that this is just a hypothetical solution, you need to try it yourself, if this suffices for you.

3

I might be easier to just use query parameters, haha. I do this for other areas, and it works fine.

That URL Pattern API is what we need. Basically, regex. JAX-RS uses such regex/patterns for it’s route definitions in a Java REST API. It’s very nice.