title: how to make multiple splats in react router 6
body: <p>I'm trying to upgrade to react router 6, and I'm breaking when trying to use more than one splat per path.</p>
  <p>basically, I'm trying to do</p>
  <pre><code>/* ~~&gt; project page
  /*/~code/* ~~&gt; file page
  </code></pre>
  <p>here are some examples of the project page:</p>
  <ul>
  <li><a href="https://hu9y25l.scopes.teambit.cloud/routing/nav-link" rel="nofollow noreferrer">https://hu9y25l.scopes.teambit.cloud/routing/nav-link</a></li>
  <li><a href="https://hu9y25l.scopes.teambit.cloud/graph/tree/root-node" rel="nofollow noreferrer">https://hu9y25l.scopes.teambit.cloud/graph/tree/root-node</a></li>
  <li><a href="https://hu9y25l.scopes.teambit.cloud/routing/compare-url" rel="nofollow noreferrer">https://hu9y25l.scopes.teambit.cloud/routing/compare-url</a></li>
  <li><a href="https://hu9y25l.scopes.teambit.cloud/hooks/use-graphql-light" rel="nofollow noreferrer">https://hu9y25l.scopes.teambit.cloud/hooks/use-graphql-light</a></li>
  </ul>
  <p>here are some examples of a file page (and other subpages)</p>
  <ul>
  <li><a href="https://hu9y25l.scopes.teambit.cloud/routing/nav-link/%7Ecode" rel="nofollow noreferrer">https://hu9y25l.scopes.teambit.cloud/routing/nav-link/~code</a>
  <a href="https://hu9y25l.scopes.teambit.cloud/layout/grid-component/%7Ecode/grid-template/grid-template.module.scss" rel="nofollow noreferrer">https://hu9y25l.scopes.teambit.cloud/layout/grid-component/~code/grid-template/grid-template.module.scss</a></li>
  <li><a href="https://hu9y25l.scopes.teambit.cloud/routing/compare-url/%7Ecode/compare-url.tsx" rel="nofollow noreferrer">https://hu9y25l.scopes.teambit.cloud/routing/compare-url/~code/compare-url.tsx</a></li>
  <li><a href="https://hu9y25l.scopes.teambit.cloud/input/button/%7Edependencies" rel="nofollow noreferrer">https://hu9y25l.scopes.teambit.cloud/input/button/~dependencies</a></li>
  <li><a href="https://hu9y25l.scopes.teambit.cloud/input/button/%7Ecompositions" rel="nofollow noreferrer">https://hu9y25l.scopes.teambit.cloud/input/button/~compositions</a></li>
  </ul>
  <p>This is not unique to our company. You can see it in other sites, like github: (although you could argue they have a fixed length for the owner)
  <a href="https://github.com/teambit/bit/tree/master/src/doctor" rel="nofollow noreferrer">https://github.com/teambit/bit/tree/master/src/doctor</a>.</p>
  <p>since React Router v4, I used to solve it with path-to-regexp, like this:</p>
  <pre><code>&lt;Route path=&quot;/:project(\\w)&quot;&gt;&lt;ProjectPage/&gt;&lt;/Route&gt;
  &lt;Route path=&quot;/:project(\\w)/~code/:file(.*)&quot;&gt;&lt;FilePage/&gt;&lt;/Route&gt;
  </code></pre>
  <p>but in v6, this doesn't seem to be the case anymore (see <a href="https://reactrouter.com/docs/en/v6/upgrading/v5#note-on-route-path-patterns" rel="nofollow noreferrer">here</a>)</p>
  <blockquote>
  <p>React Router v6 uses a simplified path format.  in v6 supports only 2 kinds of placeholders: dynamic :id-style params and * wildcards. A * wildcard may be used only at the end of a path, not in the middle.</p>
  </blockquote>
  <p>I honestly expected this syntax to work, but it is not allowed</p>
  <pre><code>&lt;Routes&gt;
    &lt;Route path=&quot;*&quot; element={&lt;ProjectPage/&gt;} /&gt;
    &lt;Route path=&quot;*/~code&quot; /&gt;
      &lt;Route index element={&lt;FilePage/&gt;} /&gt;
      &lt;Route path=&quot;*&quot; element={&lt;FilePage/&gt;} /&gt;
    &lt;/Route&gt;
  &lt;/Routes&gt;
  </code></pre>
  <p>This takes us back to react router 2, where we had to do this type of routing manually.</p>
  <p>It's crazy, React Router had only one job. Is there a way to achieve this type of dynamic urls in React Router 6?</p>