[Bug]:

0
closed
theoavoyne
theoavoyne
Posted 1 month ago

[Bug]: #8130

What version of React Router are you using?

5.3.0

Steps to Reproduce

This works:

const Router = () => (
    <Switch>
        <Route component={() => <div>Route1</div>} exact path="/route1" />
        <Route component={() => <div>Route2</div>} exact path="/route2" />
    </Switch>
);

This doesn't work (Route2 in unreachable):

const Routes1 = () => (
  <Route component={() => <div>Route1</div>} exact path="/route1" />
);

const Routes2 = () => (
  <Route component={() => <div>Route2</div>} exact path="/route2" />
);

const Router = () => (
    <Switch>
        <Routes1 />
        <Routes2 />
    </Switch>
);

Is there any workaround (apart from not using Switch)? I'd like to split my big Router component containing all my routes into smaller, logical groups of routes.

Expected Behavior

Expecting Route2 to show up when path is /route2.

Actual Behavior

Well... Route2 is not showing up when path is /route2. There's no error but the first element, <Route1 />, is matched. Nothing renders of course because of path="/route1" in Route1.