使用react-router卸载和重新布局组件

Question

我已经设置了react-router和一个Switch组件，该组件呈现了一些Page组件。我所有的组件都呈现相同的布局（现在，以后将是参数化的）。我的页面组件将内容“注入”到布局中，因此我无法让布局组件包装我的外部开关组件。必须将其用作页面组件中的子代。

// Sample code:

// app.js
const App = () => (
    <LanguageProvider defaultLanguage="el" languages={languages}>
        <PathProvider>
            <MenuProvider menu={appMenu}>
                <TemplateProvider injectedComponents={uiComponentOverrides} toolBar={toolBar}>
                    <Switch>
                        <Redirect exact from="/" to="dashboard" />
                        <Route exact path="/dashboard" component={DashboardIndex} />
                        <Route exact path="/overview" component={OverviewIndex} />
                        <Route exact path="/federation" component={FederationIndex} />
                        <Route exact path="/clubs" component={ClubsIndex} />
                        <Route exact path="/athletes" component={AthletesIndex} />
                        <Route exact path="/athletes/:id" component={AthleteDetails} />
                        <Route exact path="/officials" component={OfficialsIndex} />
                        <Route component={EmptyPage} />
                    </Switch>
                </TemplateProvider>
            </MenuProvider>
        </PathProvider>
    </LanguageProvider>
);


// Sample of a page component
// dashboard-page.js

export const DashboardIndex = () => {
    const { t } = useTranslation();
    return (
        <AppFullPage key="page-component" title={t('Home.Index.WelcomeTitle')}>
            <p>Dashboard content</p>
        </AppFullPage>
    );
};

// The AppFullPage component is the layout component. Content is injected to it through the title, subtitle, toolbar, menu and children props.

即使最终的html渲染与布局骨架相同（仅在布局的slot部分内部有所不同），也要进行卸载并重新安装整个布局树。

我能理解重新渲染整个树的反应。 React看到一个不同的顶部组件（每个位置的页面组件都不同）。因此，react渲染了新组件并创建了一个新的虚拟dom。

我无法理解的是，卸载和重新安装顶部html元素是因为它们没有发生变化。最高div不变。我的标题菜单中的语言选择器下拉菜单没有更改。左侧的应用程序菜单未更改。是的，它们是从不同的组件渲染的，但是它们是相同的输出。

如果react比较连续渲染的输出并且仅更改需要的内容，那么为什么要卸载并重新安装组件？

此行为破坏了动画和组件的其他行为（例如，即使页面更改后，我希望通用布局空间中的下拉列表也保持打开状态，但是由于已卸载并重新安装它，因此会丢失状态）。

如何指示我不要重新安装相同的组件？

或

我如何实现让页面在布局中注入内容的目标？

是否使用门户网站作为解决方案的候选人？

Answer 1

我们可以看到您的布局组件吗？您确定要卸载/重新安装或重新渲染吗？