[v6] URL param validation in <Route /> pathname

[justrealmilk]

Hi! I see the migration docs state...

URL param validation (e.g. to ensure an id is all numeric characters) please know that we plan to add some more advanced param validation in v6 at some point.

And wanted to increase its priority popularity some how!

Due to the structure of my app, it's one of the few things preventing me from hopping on the v6 bandwagon. I understand it's still in beta and there's still a lot to do before we should expect to be able to use it in production but I'm worried it'll fall the wayside so I wanted to make note of it.

As far as the implementation goes, I think it'd be totally understandable to avoid the more complex matching path-to-regex enables and instead focus on primitive types i.e. <Route path='/:param(number)' />

Thanks!

[Masynchin]

Same thoughts.

I'm really don't like the new way to validate params.

function App() {
  return (
    <Routes>
      <Route path="en" element={<Lang code="en" />} />
      <Route path="es" element={<Lang code="en" />} />
      <Route path="fr" element={<Lang code="en" />} />
    </Routes>
  );
}

When it could be

...
<Route path=":lang(en|es|fr)" element={<Lang />} />
...

function Lang() {
  const { lang } = useParams();
  ...
}

[iMoses]

I think it'd be great if there was some way to override the path mechanism so that people could reimplement the use of path-to-regex if they'd like it, or anything else for that matter. I haven't checked the new source code yet, I hope something of the sort is possible.

At the very least something that let's us validate/invalidate url params according to custom logic will be geart, and will also "bring back" optional params in a way.

Building on the previous examples:

<Route 
    path=":lang" 
    validateParams={params => /en|es|fr/.test(params.lang)} 
    element={<Lang />} 
/>

[joshua-phillips]

I really prefer this suggestion.

First it allows the params to be available at any level of the component tree through the useParams hook rather than the suggested method in the v6 docs that advises multiple routes with literal paths and then passing the literal value as a prop to the route element.

Second, it should allow other routes to be tested when you may want to render a particular component in one case and another in a different case. For instance

<Route
    path=":id"
    validateParams={params => params.id >= 0 && params.id < 100}
    element={<LowerOrder />}
/>
<Route
    path=":id"
    validateParams={params => params.id >= 100}
    element={<HigherOrder />}
/>

I understand this could be done in a single component that chooses which sub-component to render, but it seems like it would be cleaner to have this logic at the route level rather than having to dig into each route element's component code.

[wille]

validateParams implemented here. #11172
Hope we can get this merged