避免使用react-router-dom v6嵌套路由重新渲染父组件

Question

在将我的 React 应用程序升级到 React-router-dom v6 的过程中，我必须重构嵌套路由的处理方式。在以前版本的react-router-dom中，我设法在子组件中声明嵌套路由，这样就避免了每次应用程序中的路由更改时都重新渲染父组件。

配置可以总结为这样：

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

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

然后，在组件内部：

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

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

按照react-router-dom v6的升级指南，我将上面的组件重构为以下内容：

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

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

然后在组件中：

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>
...
}

我所期望的是，Component更改路线时组件不会重新渲染，只会重新渲染 NestedComponent（因此，仅loading 2...在 内部显示Component）。但相反，当我更改路线时，所有组件都会重新渲染。另外，我不确定使用新语法（使用element而不是component在Route组件中）与React.lazy.

有没有办法避免父组件的重新渲染？

使用新语法，使用 React.lazy 有意义吗？或者还有其他方法来延迟加载组件吗？