0

我正在为我的博客使用 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。我应该怎么做？

4

3 回答 3

1

更新的答案

通过将动态导入与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>
  );
}

在代码沙盒上查看更新的演示

代码的作用：

  1. 创建一个Suspense组件来包装Routes哪些组件将通过React.lazy.

  2. 函数内部map：

  • 动态生成组件

  • 将 Route 的component属性设置为上述组件

解释：

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

React.lazy接受一个调用动态导入的函数。这将返回一个解析为导入模块的承诺。

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

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

笔记：

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

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

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

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

    或一个组件，例如：

    fallback={<LoadingIndicator/>}

  • (21.08.21)React.lazy并且Suspense还不能用于服务器端渲染。如果您想在服务器渲染的应用程序中执行此操作，React 推荐Loadable Components。

有关更多信息，请查看有关 React.lazy 的 React 文档。

初步答复

这个怎么样？

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>
  );
}

这是做什么的：

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

    注意：组件名称应以大写字母开头。

  2. 将导入的组件存储在对象中

  3. 创建一个包含 3 个空槽的空数组

    注意：替换3为您需要生成的“艺术”+路径路线的数量。

  4. 访问数组的索引

  5. 使用这些索引创建一个数组

  6. 对于每个数组索引：

  7. 根据索引计算需要的“艺术”+路径，并在步骤2中从对象中获取匹配组件

  8. 返回 a <Route>，路径设置基于索引，组件设置为上面的匹配组件

    例如索引0：

    • artCompartComponents[1]又名_Art1
    • path将会/1
    • component将会Art1
于 2021-08-20T14:42:05.013 回答
0 
import { useRouteMatch } from 'react-router-dom';
let { path} = useRouteMatch();

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

<路由确切路径={path} 组件={ art${path.substring(1)}}>

于 2021-08-20T13:48:51.863 回答
0

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

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

和

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

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

于 2021-08-20T14:02:03.210 回答