如何使用 React 路由器根据路由名称动态渲染组件

Question

我正在尝试使用 react 路由器执行动态页面路由，到目前为止还算幸运，但现在我正在尝试根据下面称为 {num} 的参数呈现正确的 Module 组件？我该怎么做？？

App.js

     <Route exact path="/" component={Menu}>
     <Route exact path="/Module/:num" component={Module} />

菜单.js

export default function Menu({ match }) {
  const modules = [
    {
      title: `Module1`,
      subtitle: "Introduction",
    },
    {
      title: `Module2`,
      subtitle: "Overview",
    }

  ];

  return (
          <div className={styles.menuGrid}>
            {modules.map((module, index) => (
              <div key={index} className={styles.menuCard}>
                <Link to={`/Module/${index + 1}`}>
                  <h2>{module.name}</h2>
                  <p>{module.subtitle}</p>
                </Link>
              </div>
            ))}
          </div>
  );
}

模块.js

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>
      {`<Module${num}/>`}<---not valid but my goal??
      ??RENDER MODULE1 OR 2 BASED ON {num}??
    </div>
  );
}

Answer 1

如果你想动态命名你的组件，

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

const components = {
  Module1,
  Module2
};

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

  const MyModule = components["Module"+num]; 

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

这将从组件对象中获取所需的组件，然后简单地渲染它。

在官方文档中了解更多信息：https://facebook.github.io/react/docs/jsx-in-depth.html#choosing-the-type-at-runtime