Search code examples
reactjsreact-routerreact-router-dom

symbols in paths in React Router v6

I'm migrating from v5 to v6. It v6 it seems you can't use regexp anymore. Is there a quick workaround for a path like this? The problem is the dash, of course.

<Route path="/doc/:id-:version" />
Solution

  • You can't use partial dynamic segments, it's all or nothing. Use a single param and then apply string splitting logic on it in the component.

    Example:

    <Route path="/doc/:idVersion" element={....} />

    const { idVersion } = useParams();

const [id, version] = idVersion.split("-");

    See Dynamic Segments for more information.