Enforce a Whitelist of Values for Regex-based Path

[aress31]

I would like to know if it is possible to enforce a list of allowed :id for a route without triggering the errorComponent, for any other values the errorComponent should be displayed. See below:

{
  id: "project",
  path: "projects/:projectId",
  element: (
    <WithTabs
      tabs={["x", "y", "z"]}
    />
  ),
  children: createProjectRoutes(),
},

const createProjectRoutes = () => {
  return [
    {
      path: ":viewId",
      element: <DataTableView />,
    },
  ];
};

In this case :viewId should only be allowed to take the following values:

• x
• y
• z

Is there a trivial way of achieving this behaviour?

[aress31]

Up!

[GabenGar]

How "trivial" do you need it be? Just validate and throw in a loader.

[aress31]

This is my workaround, but it's not very developer-friendly as it adds a lot of boilerplate code. For routes with dynamic paths, it would be nice to explicitly set a whitelist using react-router.

[GabenGar]

That's not a workaround, that's any procedure which depends on a user input.
Short of inventing a schema DSL, there is no more trivial way beyond writing a validator function and call it the start of a loader. DSL is pretty tricky with URLs, since they only have a single value type - string, so anything more complicated becomes very platform dependent. I.e. even something as simple as integer becomes murky because 1 === 1.00000000000000004, but it's very unlikely "1.00000000000000004" should be a valid value where "1" is expected, only the person who writes the code for the route knows, not a framework.