ReactJS中如何通过URL参数动态导入指定路径的store文件

你需要用ES规范的动态导入语法（import()）来实现路径可变的模块导入：静态import语句是编译阶段执行的，无法使用运行时才拿到的id参数拼接路径，只有运行时执行的动态导入可以满足需求。

完整实现代码 #

你可以直接修改Child组件如下：

import React, { useState, useEffect } from 'react'
import { useParams } from "react-router-dom";

// 可选：添加白名单校验，避免加载非法模块
const VALID_STORE_IDS = ['apple', 'banana', 'orange']

function Child() {
  const { id } = useParams();
  const [storeMethods, setStoreMethods] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    const loadTargetStore = async () => {
      // 非法参数直接返回错误
      if (!VALID_STORE_IDS.includes(id)) {
        setError(`不支持的参数：${id}`)
        setLoading(false)
        return
      }

      setLoading(true)
      setError(null)
      try {
        // 固定路径前缀，仅后段用变量，让打包工具可以预扫描所有store下的模块
        const storeModule = await import(`../store/${id}`)
        setStoreMethods(storeModule)
        // 这里可以直接执行导入的初始化方法
        // const { loadWeb3, loadAccount, loadToken, loadExchange } = storeModule
        // await loadWeb3()
      } catch (err) {
        setError(`加载${id}模块失败，请检查文件是否存在`)
        console.error('模块加载错误：', err)
      } finally {
        setLoading(false)
      }
    }

    id && loadTargetStore()
  }, [id])

  if (loading) return <div>资源加载中...</div>
  if (error) return <div>错误：{error}</div>

  return (
    <div>
      当前参数：{id}
      {/* 后续业务逻辑可以直接使用storeMethods下的导出方法 */}
    </div>
  );
}

注意事项 #

• 目前主流的React工程化工具（Create React App、Vite）默认都支持动态导入语法，无需额外配置。如果是老的Webpack4项目，需要先安装@babel/plugin-syntax-dynamic-import插件开启支持。
• 动态导入的路径必须保留固定前缀，不要把整个路径都写成变量，否则打包工具无法识别需要打包的资源范围，会导致生产环境找不到模块。

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