Route Masking to Add Additional Characters to URL

[kyusungpark]

Hi, I would like to add some route masking for one of the urls I have.

I have below where i would like to not show one of the parameters (assessmentId) and instead add additional characters after the URL.

const testMask = createRouteMask({
  routeTree,
  from: '/practice/courses/$courseId/$type/$assessmentId',
  to: '/practice/courses/$courseId/$type/ADDITIONAL_MASK', // Get rid of $assessmentId and add other string
  params: (prev) => ({
    courseId: prev.courseId,
    type: prev.type,
  }),
});

where I pass this into my couter instance as: routeMasks: [testMask],

When I add the code above, I get an error on the line where to property is saying that that
Type '"/practice/courses/$courseId/$type/ADDITIONAL_MASK"' is not assignable to type '"" | "/" | "/about" | "/contact" | ....

Yes, the route doesn't exist because I am masking it to something else so that I don't see the users the whole URL.
I am not sure what I am missing here. Any ideas anyone?

[schiller-manuel]

to of the mask must be a valid route.
can't you create that route ?

[kyusungpark]

Ahh, I see. So to must be a valid path even though you are masking a route. Thank you for the info. Yes, I think I will try that.

[kyusungpark]

Hi, just one more question. I ended up using search params + masking to handle the case above. Now, everything works as expected. But when user types in /MASKED_URL, I would like to show a valid error page. I am doing this by adding a notFoundComponent to this URL, but it does not seem to show. Instead it shows Uncaught SearchParamError. How could I redirect to a proper page?

[kyusungpark]

Had to use errorComponent, not notFoundComponent

https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#defaulterrorcomponent-property