如何使用React Router根据路由参数num动态渲染对应Module组件

你写的<Module${num}/>是模板字符串，仅会被React渲染为普通文本，不会被解析为组件实例，所以无法生效。可以通过以下方法实现需求：

推荐方案：组件映射表 #

该方案扩展性最好，后续新增模块只需在映射表中新增对应条目即可，无需修改渲染逻辑，修改后的Module.js代码如下：

import React from "react";
import Module1 from "./Pages/Module1";
import Module2 from "./Pages/Module2";

// 建立路由参数和组件的映射关系，路由参数默认是字符串类型，所以key用字符串
const moduleMap = {
  '1': Module1,
  '2': Module2
}

export default function Module({ match }) {
  const {
    params: { num },
  } = match;
  // 取出对应组件，变量首字母必须大写，符合React组件命名规范
  const RenderModule = moduleMap[num];

  // 可选：加容错逻辑，避免参数非法时报错
  if (!RenderModule) {
    return <div>当前模块不存在</div>
  }

  return (
    <div>
      <RenderModule />
    </div>
  );
}

备选方案：条件判断 #

如果模块数量非常少，也可以直接用条件渲染实现：

import React from "react";
import Module1 from "./Pages/Module1";
import Module2 from "./Pages/Module2";

export default function Module({ match }) {
  const {
    params: { num },
  } = match;

  return (
    <div>
      {num === '1' && <Module1 />}
      {num === '2' && <Module2 />}
    </div>
  );
}

现有代码其他问题修复 #

• App.js中首页Route标签未闭合，修改为 <Route exact path="/" component={Menu} />
• Menu.js中modules数组定义的字段为title，渲染时误用了module.name，修改为module.title即可正常显示模块标题。

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