Question

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

我遇到的问题是，用<Switch>包装数组映射时，我在控制台中看到以下错误：

警告：React无法识别DOM上的computedMatch道具元件。如果您有意让它作为自定义项出现在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>

如果我手动将这些部分创建为单独的<Route>组件，然后将<Switch>包裹在它们周围，则该错误不存在，因此我认为这与数组映射有关。

尽管我最终可能有数百个需要Route路径的部分，但我无法手动创建所有部分。我还需要能够将多个道具发送到<Section>组件，这就是为什么我在render()内使用<Route>道具

我可能在这里缺少一些简单的东西。有什么好心的建议吗？非常感谢。

Answer 1

我认为您需要在网址中使用match，因为这些部分相同，唯一的区别是名称。

考虑使用一条带有Container的单一路线来加载您的部分：

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

在SectionContainer中，您可以从section访问url，如下所示：

const { section } = this.props.match.params;

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

因此，您将能够从后端获取本节的信息。

此外，如果您需要将一些新道具传递到容器中，则可以像这样进行操作：

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

然后是<Route exact path="/section/:section/special/home" component={SpecialSectionContainer} />。

在“容器”部分中，您可以切换已知的部分以加载适当的函数，如果使用状态管理API（例如redux），则由reducer / saga决定根据调用哪个确切的函数实现。已加载的部分。

希望它能解决您的问题。

致谢。

编辑

例如，使用redux，您可以执行以下操作：

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

这将调度一个动作，该动作将被副作用中间件（通常是thunk或saga）拦截，并且将执行API调用以获取您的数据并将其存储在store中。然后您的SectionContainer最终将轻松地加载它们并将它们传递给功能组件至just display them。

Answer 2

来自React文档

如果您尝试呈现DOM，则会触发unknown-prop警告带有道具的元素，该道具未被React识别为合法DOM 属性/属性。您应该确保您的DOM元素不周围有乱七八糟的道具。

在这种情况下，孩子是您的孩子，因此将非标准的propedMatch属性传递给本地dom节点，因此React给您健康的警告。因此，使用<>或将丢弃警告。

React-Router-在路由数组映射之外使用<switch>时出错

2 个答案: