React懒加载视图导航异常：视图追加而非替换

核心问题 #

1. 视图追加而非替换：你用对象views存储所有点击过的视图组件，每次点击都会往对象里新增键值对，MainView又会遍历对象的所有值渲染，导致旧视图不会被移除，新视图不断追加。
2. 无法重新加载最新视图：React.lazy配合webpack的模块导入默认会缓存模块，即使重复调用import()，也不会重新请求最新的文件。

修复步骤 #

1. 调整状态存储逻辑

把存储所有视图的对象，改成只存储当前激活的视图名称，这样每次切换时只会渲染当前选中的视图：

// 原状态
// const [views, setView] = useState({});
// 修改后
const [currentView, setCurrentView] = useState('Dashboard'); // 默认加载Dashboard

2. 修改视图导入逻辑，绕过缓存

给import的路径添加时间戳参数，让webpack认为每次都是新的模块请求，从而加载最新的视图文件：

const importView = viewName =>
    lazy(() =>
        // 添加?t=${Date.now()} 绕过缓存
        import(`../../layout/views/${viewName}?t=${Date.now()}`)
            .catch(() => import(`../../layout/views/Dashboard`))
    );

3. 简化视图渲染逻辑

不需要再遍历所有视图，直接根据当前视图名称渲染对应的组件：

// 原MainView
// const MainView = ({views}) =>
//     Object.values(views).map(View => (
//         <View/>
//     ));
// 修改后
const MainView = ({viewName}) => {
    const View = importView(viewName);
    return <View />;
};

4. 更新切换函数与渲染部分

修改changeView函数，只需要更新当前视图名称即可；同时在渲染部分传入当前视图名称：

const changeView = viewName => {
    setCurrentView(viewName);
};

// 渲染部分的Suspense内修改为
<MainView viewName={currentView} />

完整修复后的代码 #

import React, {lazy, useState} from 'react';

const importView = viewName =>
    lazy(() =>
        import(`../../layout/views/${viewName}?t=${Date.now()}`)
            .catch(() => import(`../../layout/views/Dashboard`))
    );

const MainView = ({viewName}) => {
    const View = importView(viewName);
    return <View />;
};

export default function App() {
    const [currentView, setCurrentView] = useState('Dashboard');

    const changeView = viewName => {
        setCurrentView(viewName);
    };

    const loadDashboard = () => changeView('Dashboard');
    const loadInbox = () => changeView('Inbox');
    const loadNewsletters = () => changeView('Newsletters');

    return (
        <main>
            <section>
                <button onClick={loadDashboard}>Dashboard</button>
                <button onClick={loadInbox}>Inbox</button>
                <button onClick={loadNewsletters}>Newsletters</button>
            </section>
            <section>
                <React.Suspense fallback="Loading view...">
                    <div className="row">
                        <MainView viewName={currentView} />
                    </div>
                </React.Suspense>
            </section>
        </main>
    );
}

额外说明 #

• 时间戳参数?t=${Date.now()}会让浏览器和webpack每次都重新请求模块文件，确保获取最新的视图代码，适合开发环境；生产环境如果需要热更新，可以考虑用版本号或者其他方式替换。
• 现在每次点击按钮，都会触发重新导入对应视图，同时只会渲染当前选中的视图，实现标准的导航切换效果。

内容的提问来源于stack exchange，提问作者Zak