在对象内通过编程方式从对象创建路由不起作用

Question

我正在尝试为我的应用程序创建一个标准组件，该组件将返回具有路径和子组件的兼容路由列表，这些路径和子组件是系统地派生自具有我所有应用程序页面（例如/ login）的对象的。

问题是，我可以将返回路线的脚本直接放入根react组件中，但是将相同的代码分解成自己的组件并在根中进行渲染时，即使返回了子代码，它也不会返回任何子代。同样的事情。

这可能与React路由匹配有关，但我不确定。

示例：

包含我所有页面的对象：

...    

const views = [
  {
    path: "/auth/sign-up",
    exact: true,
    component: SignUp,
    secure: true
  },
  {
    path: "/auth/sign-in",
    exact: true,
    component: SignIn,
    secure: true
  },
]

Viewer组件旨在捕获路径并返回兼容的路由：

作为示例，我正在根据上面的对象中secure的值是否为真进行过滤。

function Viewer(props) {
  return (
    views.filter(view => view.secure === props.secure).map((view, index) => (
      <Route
        key={index}
        path={view.path}
        exact={view.exact}
        children={<view.component />}
      />
    ))
  )
}

我的root react组件，具有Viewer组件（从上面开始），该组件不起作用：

export default function Root() {
  return (
    <switch>
      <Viewer secure={true} />
    </switch>
  );
}

...

我的根反应组件，将路由代码直接放置在里面，它确实起作用：

export default function Root() {
  return (
    <Switch>
      {views.filter(view => view.secure === true).map((view, index) => (
          <Route
            key={index}
            path={view.path}
            exact={view.exact}
            children={<view.component />}
          />
        ))}
    </switch>
  );
}

...

您能否帮助我理解这两个示例之间的区别，一个示例使用直接放置在root元素中的路由代码，而不是使用具有Viewer组件的根的根，后者应该执行相同的操作。您可以保留的任何信息将不胜感激。

Answer 1

您的问题的原因与react-router-dom的工作方式有关，我的意思是Switch组件旨在一次仅渲染一个Route组件，因此Switch组件的子代必须直接是Route或Redirect组件而不是该Routes的包装器，如果您想对Viewer组件执行类似的操作，则应将Switch组件移到Viewer组件中，例如：]

function Viewer(props) {
  const routes = views.filter(view => view.secure === props.secure).map((view, index) => (
      <Route
        key={index}
        path={view.path}
        exact={view.exact}
        children={<view.component />}
      />
    ));
  return <Switch>{routes}</Switch>;
}

这里有official documentation告诉您有关情况并解释其工作原理。