I cannot get <CompatRoute> to work

[bobsilverberg]

I've seen similar questions which seem to be unanswered. After installing react-router-dom-v5-compat and making no other changes, everything works, but when I try to change one of the routes to use CompatRoute, the page no longer renders. Here is a simplified version of my code for routes:

import { Route, Router, Switch } from 'react-router-dom';
import { CompatRoute, CompatRouter } from 'react-router-dom-v5-compat';

<Router history={history}>
  <CompatRouter>
    <Switch>
      {/* This one works */}
      <Route exact path="/:lang/about" component={About} />

      {/* This one does not */}
      <CompatRoute
        exact
        path="/:lang/:application(firefox|android)/addon/:slug/privacy/"
        render={() => <AddonInfo infoType={ADDON_INFO_TYPE_PRIVACY_POLICY} />}
      />

      {/* Nor does this - with different syntax */}
      <CompatRoute
        exact
        path="/:lang/:application(firefox|android)/addon/:slug/eula/"
        children={<AddonInfo infoType={ADDON_INFO_TYPE_EULA} />}
      />

      {/* Nor does this - with different syntax */}
      <CompatRoute
        exact
        path="/:lang/:application(firefox|android)/addon/:slug/license/">
          <AddonInfo infoType={ADDON_INFO_TYPE_CUSTOM_LICENSE} />
      </CompatRoute>
    </Switch>
  </CompatRouter>
</Router>

I have seen a number of different syntaxes propsed for the component that renders the route, and none of the above seem to work for me.

The component in question, AddonInfo is using useParams from react-router-dom-v5-compat. If I switch the above routes from CompatRoute back to Route and import useParams from react-router-dom, then it works fine, so something isn't quite right with CompatRoute.

Does anyone have any suggestions about something else I might try?

[bfaulk96]

I agree the docs lead to quite some confusion. I see you have exhausted several different attempts, have you tried the following? (I also don't know if this will work, but it's worth a try if you haven't tried it yet)

<CompatRoute
   exact
   path="/:lang/:application(firefox|android)/addon/:slug/privacy/"
   component={AddonInfo}
/>

[bobsilverberg]

Yes, I apologize for not documenting them, but I also tried:

<CompatRoute
   exact
   path="/:lang/:application(firefox|android)/addon/:slug/privacy/"
   component={AddonInfo}
/>

as well as:

<CompatRoute
   exact
   path="/:lang/:application(firefox|android)/addon/:slug/privacy/"
   element={<AddonInfo />}
/>

and neither of those work either. I don't get any errors, but the page does not render anything.

[bobsilverberg]

For anyone following along at home, the problem was the regex in the path. I hadn't come across the information that regex in paths was no longer allowed in v6, but after removing the regex things started working.