[Bug]: CompatRoute nesting is not working

[Luksys5]

What version of React Router are you using?

16.8

Steps to Reproduce

Use this boilerplate code to reproduce error. The CompatRoute /smth/test can not be accessed, tried adding location property to the CompatRoute but does not work

Perhaps I'm missing something obvious. tried reproducing in the sandbox here https://stackblitz.com/edit/github-gfnwsn?file=src/App.tsx

function TestRoutes() {
    const { url } = useRouteMatch();
    const location = useLocation();

    return (
        <Switch>
            <CompatRoute path="/test" exact component={() => <h2>Hey 1</h2>} />
            <CompatRoute path="/testv2" component={() => <h1>HI 2</h1>} />
        </Switch>
    );
}

const App = () => (
        <BrowserRouter>
            <CompatRouter>
                <Switch>
                    <CompatRoute path="/smth" component={TestRoutes} />
                    <CompatRoute path="/smthelse" component={() => <h1>ELSE</h1>} />          
              </Switch>
          </BrowserRouter>
)

Expected Behavior

As the user opens url /smth/test it should write - "Hey 1"

Actual Behavior

As the user opens url /smth/else it does not render the targeted route

[AndreiIl]

I believe you need to use /smth/* as the path in order for the child TestRoutes to match the children

[fiws]

Running into the same issue. I tried to create a better example:

• Just react-router v5 (working as intended): https://codesandbox.io/s/react-router-v5-compat-problem-1-cpcqk2?file=/src/App.working.js
• Replace Routes with CompatRoute (nested routes stop working): https://codesandbox.io/s/react-router-v5-compat-problem-2-05hdfp?file=/src/App.js

It feels like i'm also missing something obvious. They way i interpret the migration guide is that the routing should not change if i just replace Route with CompatRoute and keep using "Switch".

import "./styles.css";
import { BrowserRouter, Switch, Link } from "react-router-dom";
import { CompatRoute, CompatRouter } from "react-router-dom-v5-compat";

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/account">Account index</Link>
        <Link to="/account/settings">Account settings</Link>
      </nav>
      <CompatRouter>
        <Switch>
          <CompatRoute path="/" exact component={() => <h1>home</h1>} />
          <CompatRoute path="/account" component={NestedRoutes} />
        </Switch>
      </CompatRouter>
    </BrowserRouter>
  );
}

function NestedRoutes() {
  return (
    <div>
      <h1>Account</h1>
      <Switch>
        <CompatRoute path="/account" exact component={() => <h2>Index</h2>} />
        <CompatRoute
          path="/account/settings"
          exact
          component={() => <h2>Settings</h2>}
        />
      </Switch>
    </div>
  );
}

[Luksys5]

@AndreiIl No, because if the exact property is missing then it adds * automatically

[github-actions[bot]]

This issue has been automatically marked stale because we haven't received a response from the original author in a while 🙈. This automation helps keep the issue tracker clean from issues that are not actionable. Please reach out if you have more information for us or you think this issue shouldn't be closed! 🙂 If you don't do so within 7 days, this issue will be automatically closed.

[github-actions[bot]]

This issue has been automatically closed because we didn't hear anything from the original author after the previous notice.

[studnik18]

Until it's resolved, I may recommend a 'workaround' I used. Nesting works with the Route from react-router-dom in top level and CompatRoute in nested components. So it's possible to change only the deepest Routes to CompatRoutes and then refactor from bottom to top just like described in the blog post. The only difference is, that you can't just replace all Routes with CompatRoutes. So using the @Luksys5 snippet:

function TestRoutes() {
    const { url } = useRouteMatch();
    const location = useLocation();

    return (
        <Switch>
            <CompatRoute path="/test" exact component={() => <h2>Hey 1</h2>} />
            <CompatRoute path="/testv2" component={() => <h1>HI 2</h1>} />
        </Switch>
    );
}

const App = () => (
        <BrowserRouter>
            <CompatRouter>
                <Switch>
                    <Route path="/smth" component={TestRoutes} />
                    <Route path="/smthelse" component={() => <h1>ELSE</h1>} />          
              </Switch>
          </BrowserRouter>
)

Change - the Route from react-router-dom in App

[moimael]

We are in the process of migrating to V6 and this bug makes it extremely hard to not break anything. I'm surprised it doesn't get more traction. CompatRoute and CompatRouter are supposed to be drop-in replacement to help with the migration, but it's far from being the case.

[tigerabrodi]

@moimael Yep, encountering the same issue.

Half way through just to realize CompatRoute won't do it. Either you do a partial CompatRoute migration and then all the way to v6, but what's the point with that?

Gonna be painful and a lot of work, but i guess we gotta go all the way to v6 in one go 😟

Also surprised people aren't flocking this.

[moimael]

@tigerabrodi We had to go with the partial migration first because of the size of our codebase, but we are creating a lot of prod incidents. It's very hard to find which routes are nested. It is extremely painful.