In the process of upgrading my react app to react-router-dom v6, I had to refactor how the nested routing is handled. In the previous versions of react-router-dom, I managed to declare nested routes in child components, and that avoided re-rendering the parent component every time the route changed in the app.

The configuration could be summarized as something like this:

const Component = React.lazy(() => import('./path/to/Component'));

<Switch>
    <Route path="..." component={Component} />
</Switch>

Then, inside the Component:

const NestedComponent = React.lazy(() => import('./path/to/NestedComponent'));

const Component = ({match}) => {
...
    <Route path={match.url} component={NestedComponent} />
...
}

Following the upgrade guide for react-router-dom v6, I refactored the components above into something as the following:

const Component = React.lazy(() => import('./path/to/Component'));

<Routes>
    <Route path=".../*" element={
        <React.Suspense fallback={"loading 1..."}>
            <Component />
        </React.Suspense>
    } />
</Routes>

Then in the component:

const NestedComponent = React.lazy(() => import('./path/to/NestedComponent'));

const Component = ({match}) => {
...
    <Routes>
        <Route path={match.url} element={
            <React.Suspense fallback={"loading 2..."}>
                <NestedComponent />
            </React.Suspense>
        } />
    </Routes>
...
}

What I expected would have been that the Component component would not re-render while changing the route, only the NestedComponent (hence, showing only loading 2... inside the Component). But instead, when I change the route, all the components re-render. Also, I'm not sure whether with the new syntax (using element instead of component in the Route component) makes sense combined with React.lazy.

Is there a way to avoid the re-rendering of the parent component?

With the new syntax, does it make sense to use React.lazy? Or is there another way to lazily load components?