在 React 中循环遍历路线图 Main.js

Question

我正在为我的博客使用 react-router-dom。我的 Main.js 看起来像

    const Main = () => {
      return (
        <Switch> {/* The Switch decides which component to show based on the current URL.*/}
          <Route exact path='/' component={Home}></Route>
          <Route exact path='/1' component={art1}></Route>
          <Route exact path='/2' component={art2}></Route>
          {/* <Route exact path='/3' component={art3}></Route> */}
        </Switch>
      );
    }

我想让它自动理解为 component = "art"+path。我该怎么办？

Answer 1

import { useRouteMatch } from 'react-router-dom';
let { path} = useRouteMatch();

获取路径后，从组件串联中的路径中删除“/”

<路线确切路径={路径} 分量={art${path.substring(1)}}>

Answer 2

你想做的事情是不可能的，因为你不能从 Javascript 中的字符串创建变量名。我假设你有类似

art1 = () => {
    // return some JSX
}

和

art2 = () => {
    // return some JSX
}

当你有像这样的变量名只是数字不同时，那么你几乎肯定做错了什么。

Answer 3

更新的答案

通过 React.lazy 使用动态导入进一步减少了代码。（有关原始代码，请参阅下面的初始答案）

import { lazy, Suspense } from "react";
import { Switch, Route } from "react-router-dom";

const Main = () => {
  return (
    <Switch> {/* The Switch decides which component to show based on the current URL.*/}
      <Route exact path='/' component={Home}></Route>
      <Suspense fallback="">
        {
          [...Array(3).keys()].map((i) => {
            const artComp = lazy(() => import(`./components/Art${i+1}`));
            return (<Route exact path={`/${i+1}`} key={i+1} component={artComp}></Route>);
          })
        }
      </Suspense>
    </Switch>
  );
}

View updated demo on codesandbox

代码的作用：

创建一个 Suspense 组件来包装 Routes 组件将通过 React.lazy.
动态生成
在map函数内：

动态生成组件
设置Route的component属性为上面的组件

解释：

使用 React.lazy，您可以动态导入模块并将其呈现为常规组件。

React.lazy 采用调用动态导入的函数。 returns 一个解析为导入模块的承诺。

注意：导入模块中的组件应该是default export，否则promise解析为undefined.

延迟加载意味着只加载当前需要的内容。由于组件将是惰性组件，它们只会在首次渲染时加载（即当您第一次单击相应的 link 时）。

备注：

没有为答案中的 Suspense 指定回退。

使用 Suspense，您可以指定在等待惰性组件加载时呈现的回退内容（例如加载指示器）。

后备内容可以是 HTML 字符串，例如

fallback={<div>Loading...</div>}

或一个组件，例如：

fallback={<LoadingIndicator/>}
(21.08.21) React.lazy 和 Suspense 尚不可用于服务器端呈现。如果您想在服务器呈现的应用程序中执行此操作，React 推荐 Loadable Components.

For more information, view the React documentation about React.lazy.

初始答案

这个怎么样？

import Art1 from '...';
import Art2 from '...';
import Art3 from '...';
// and so on

const Main = () => {

  const artComponents = {
    art1: Art1,
    art2: Art2,
    art3: Art3,
    // and so on
  };

  return (
    <Switch> {/* The Switch decides which component to show based on the current URL.*/}
      <Route exact path='/' component={Home}></Route>
      {
        [...Array(3).keys()].map((i) => {
          const artComp = artComponents[`art${i+1}`];
          return (<Route exact path={`/${i+1}`} key={i+1} component={artComp}></Route>)
        })
      }
    </Switch>
  );
}

这是做什么的：

将“艺术”+路径组件导入文件

注意：组件名称应以大写字母开头。
将导入的组件存储在对象中
创建一个有 3 个空槽的空数组

注意：将3替换为您需要生成的“艺术”+路径路线的数量。
访问数组的索引
用这些索引创建一个数组
对于每个数组索引：
根据索引计算出需要的"art"+路径，从第2步的对象中得到匹配的组件
Return一个<Route>，路径根据索引设置，组件设置为上面匹配的组件

例如对于索引 0:
- artComp 将是 artComponents[1] a.k.a。 Art1
- path 将是 /1
- component 将是 Art1

在 React 中循环遍历路线图 Main.js

Looping through route maps in React Main.js

reactjs

loops

react-dom

react-dom-server

更新的答案

初始答案