Javascript React Router-使用时出错<；开关>；在路线的数组映射之外

我使用React路由器从阵列动态生成路由。如果没有匹配的路径，那么我希望显示404页面

我遇到的问题是，当使用

包装数组映射时，我在控制台中看到以下错误：

警告：React无法识别DOM上的

computedMatch

prop 元素。如果您有意将其作为自定义项显示在DOM中 属性，改为小写

computedmatch

。如果你 意外地从父组件传递了它，请将其从DOM中删除 元素

请参阅下面我的代码示例：

const sections = [
    'section1',
    'section2',
    'section3'
];

<Switch>

    {/* If only /section/ is loaded in the browser, redirect to the first section */}
    <Route exact path="/section" render={() => (
        <Redirect to="/section1/home" />
    )}/>

    {/* Map through the sections array */}
    {this.state.sections.map((section, sectionIndex) => (
        <div key={sectionIndex}>
            <Route path={"/section/" + section + "/home"} render={() => (
                <Section
                    testProp={'test'}
                />
        )}/>
        </div>
    ))}

    {/* 404 Page */}
    <Route component={NoMatch} />

</Switch>

const节=[
"第一节",，
"第2节",，
“第3节”
];
{/*如果浏览器中仅加载了/section/，请重定向到第一节*/}
(
)}/>
{/*通过节数组进行映射*/}
{this.state.sections.map（（section，sectionIndex）=>(
(
)}/>
))}
{/*404页*/}

如果我手动将这些部分创建为单独的

组件，然后在它们周围包装一个

，则错误不存在，因此我假设这与数组映射有关

但我无法手动创建所有区段，因为最终可能会有数百个区段需要路由路径。我还需要能够向

组件发送多个道具，这就是我在

中使用

render（）

道具的原因

---

我可能错过了一些简单的东西。有什么好建议吗？非常感谢。

来自React文档

如果试图呈现DOM，将触发未知道具警告 元素中的prop未被React识别为合法DOM 属性/属性。您应该确保您的DOM元素不会 让假道具四处飘浮

---

在本例中，子节点是您的，因此非标准道具computedMatch将被传递到本机dom节点，因此React会向您发出健康的警告。因此，使用或将放弃警告。

我认为您需要在url中使用

匹配

，因为这些部分是相同的，唯一的区别是名称不同

考虑使用一条带有

容器的单一路线装载区段：

<Switch>
    <Route exact path="/section/:section/home" component={SectionContainer} />
    <Route component={NotFoundPage} />
  </Switch>

或
const activeSection=this.props.match.params.section

因此，您将能够从后端获取此部分的信息

此外，如果您需要向容器传递一些新道具，您可以这样做：

const SpecialSectionContainer= (props) => (
  <SectionContainer
    special="this section is special"
    {...props}
  />
);

这将发送一个操作，该操作将被您的副作用中间件（基本上是thunk或saga）截获，并将执行一个API调用以获取数据并将其存储在
存储中。您的
节容器
最终将轻松加载它们，并将它们传递给功能组件，以
只显示它们
我将使用
，而不是循环并多次生成同一对象Hi Mohamed。我可以这样传递道具吗？我不确定什么是
：section
和
{sectionscocontainer}
是相对的。是的，你需要传递什么类型的道具？函数、节信息等。所以我可能会将它们传递给
，然后传递给
？我假设
将包含
？但是，在这个例子中，我如何传递到
？我认为您正在使用龙公路来满足您的需求。你唯一需要的就是包装，集装箱将负责装载。我会尝试用代码片段来解释我的想法谢谢你。如何将
特殊
道具功能发送回父组件？（
所属的组件。像这样？
const SpecialSectionContainer=（propsFunction）=>（）；
-装入时，它将调用
special（）
，则需要将其发送到当前所属的父容器。
很抱歉造成混淆，为什么需要返回父容器？简单地说，如果有与某个节相关的内容，则由节容器来管理（功能、验证和所有内容）。你使用redux吗？如果你能解释一下你的应用程序的这个模块会做什么？那么我们可以首先考虑一个设计来实现它。很抱歉解释得很糟糕。当安装一个部分时，我需要将一个函数传递到顶部的主模块。这是主组件中具有路由的模块。这个函数携带有关已装入节的数据，以便主要组件知道如何处理它。我将查看是否可以在节容器上使用它。我不使用Redux。感谢您的帮助！不客气。当然它将在节容器中工作，否则，我们应该让它工作。您很好，祝您好运。
const SpecialSectionContainer= (props) => (
  <SectionContainer
    special="this section is special"
    {...props}
  />
);

componentWillMount = () => {
    this.props.loadSection(this.props.match.params.section);
  };