React项目Main.js路由表循环遍历与react-router-dom组件自动匹配方案

实现方案 #

你当前使用的是 react-router-dom v5 版本的语法，以下提供两种可直接落地的实现方式：

方案1：预定义组件映射（性能最优，适合文章数量少的场景）

提前导入所有文章组件，创建ID到组件的映射表，配合带参数的路由自动匹配：

// 顶部导入你所有的文章组件
import Home from './Home'
import art1 from './articles/art1'
import art2 from './articles/art2'
import art3 from './articles/art3'

// 创建组件映射表
const artComponentMap = {
  1: art1,
  2: art2,
  3: art3
}

const Main = () => {
  return (
    <Switch>
      <Route exact path='/' component={Home}></Route>
      {/* 路径后的(\\d+)是正则约束，保证只会匹配纯数字的路径，不会干扰其他非数字开头的路由规则 */}
      <Route 
        exact 
        path='/:id(\\d+)' 
        render={({match}) => {
          const ArtComp = artComponentMap[match.params.id]
          // 容错逻辑：没有对应文章时返回提示
          return ArtComp ? <ArtComp /> : <div>当前文章不存在</div>
        }}
      ></Route>
    </Switch>
  );
}

新增文章时只需在映射表中加一条对应关系即可，无需新增Route配置。

方案2：动态导入组件（无需维护映射，适合文章量大的场景）

如果你的文章组件都按art[数字].jsx的规则存放在同一个目录下，可以用打包工具的动态导入能力，完全不用手动维护映射关系：

import { useState, useEffect } from 'react'
import Home from './Home'

const Main = () => {
  return (
    <Switch>
      <Route exact path='/' component={Home}></Route>
      <Route 
        exact 
        path='/:id(\\d+)'
        render={({match}) => {
          const [ArtComp, setArtComp] = useState(null)
          const [isLoading, setIsLoading] = useState(true)
          const [hasError, setHasError] = useState(false)

          useEffect(() => {
            const id = match.params.id
            setIsLoading(true)
            // 这里的路径要和你实际存放文章组件的路径保持一致
            import(`./articles/art${id}.jsx`)
              .then(mod => {
                setArtComp(() => mod.default)
                setHasError(false)
              })
              .catch(() => setHasError(true))
              .finally(() => setIsLoading(false))
          }, [match.params.id])

          if(isLoading) return <div>文章加载中...</div>
          if(hasError) return <div>当前文章不存在</div>
          return ArtComp ? <ArtComp /> : null
        }}
      ></Route>
    </Switch>
  );
}

后续新增文章只要按命名规则放到对应目录即可，无需修改任何路由配置。

v6版本适配说明

如果你后续升级到react-router-dom v6，只需要把Switch替换为Routes，component/render属性替换为element属性，通过useParams获取路由参数即可。

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