Question

我在React-Router-Dom中遇到了奇怪的行为。让我先解释问题，然后再解释奇怪的行为。

我正在尝试创建一个管理页面，用户可以从中动态添加页面，也可以更改添加页面的顺序。

我以以下格式将添加的页面存储在数据库中。

path="/addeddynamicpage"
name="Added Dynamic Page"
component="Dynamic"

有一个数组类型变量，用于存储此路由，然后提供给View和Router组件。

我已经导入了要在其上获取动态路由的组件上的所有页面。提取此路由后，我将遍历routes变量并传递实际组件。

例如：

如果我从后端传递component =“ Dynamic”，则它是一个字符串，而不是导入的类/函数。因此，我将匹配此字符串，并将返回已经导入的Dynamic类/函数。

现在的行为很奇怪，如果我将这个结构静态地放置在routes变量中，那么我就可以导航到其他页面。

但是我要从后端获取它们，并根据无法使用的route对象中的要求进行设置。

如果我将两条/三条静态路由放入路由中，然后从后端推送新获取的动态路由，则工作正常。

如果页数增加，则无法使用。

如果我静态放置管理页面，则它可以正常工作。如果我将它们移到数据库并从那里获取它们，它将无法正常工作。

下面是代码，获取路由并设置类/功能：

_getComponent = (str) => {
    switch (str) {
      case "Dashboard":
        return Dashboard;
      case "Dynamic":
        return Dynamic;
      case "Calendar":
        return Calendar;
      case "Navigation":
        return Navigation;
      case "JqueryFormUpload":
        return JqueryFormUpload;
      default:
        return null;
    }
  }

  fetchData = () => {
    fetch("http://localhost:53982/api/Admin/GetRouteLinks")
      .then(res => { return res.json() })
      .then(json => {
        let data = JSON.parse(json.Data);

        data.forEach((value, index) => {
          let obj = value;

          //component
          if (value.component !== null) {
            obj.component = this._getComponent(value.component);
          }

          dashboardRoutes.push(obj);

        }); 
      })
  }

下面是初始化路由的交换机代码：

<Switch>
  {dashboardRoutes.map((prop, key) => {
    {prop.component}
    if (prop.redirect)
      return <Redirect from={prop.path} to={prop.pathTo} key={key} />;
    if (prop.collapse)
      return prop.views.map((prop, key) => {
        return (
          <Route path={prop.path} component={prop.component} key={key} />
        );
      });
    return <Route path={prop.path} component={prop.component} key={key} />;
  })}           
</Switch>

如何确保从后端获取的每条路由都能正常工作？
代码或方法是否有问题？

为什么反应路由不适用于使用react-router-dom动态添加的路由？

0 个答案: