React-Router

Question

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

我遇到的问题是，当使用 <Switch>:

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

Warning: React does not recognize the computedMatch prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase computedmatch instead. If you accidentally passed it from a parent component, remove it from the DOM element.

请在下面查看我的代码示例：

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>，则错误不存在，因此我认为它与数组映射有关。

我无法手动创建所有部分，因为我们最终可能会有数百个部分需要路由路径。我还需要能够将多个道具发送到 <Section> 组件，这就是我在 <Route>

中使用 render() 道具的原因

我可能漏掉了一些简单的东西。任何人都可以请教吗？非常感谢。

Answer 1

来自 React 文档

The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.

在这种情况下，child 是您的，因此非标准道具 computedMatch 被传递给本机 dom 节点，因此 React 会向您发出健康警告。因此，使用 <> or 将丢弃警告。

Answer 2

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

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

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

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

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} />.

一旦进入你的 Container 部分，你就可以切换你已知的部分来加载适当的功能，如果使用像 redux 这样的状态管理 API，这取决于你的 reducer/saga 决定什么根据加载的部分调用的确切函数实现。

希望能解决您的问题。

此致。

编辑

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

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

这将调度一个将被您的副作用中间件（基本上是 thunk 或 saga）拦截的操作，并将执行一个 API 调用以获取您的数据并将其存储在 store.你的 SectionContainer 最终将轻松加载它们并将它们传递给功能组件 just display them.

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

React-Router - Error When Using <Switch> Outside an Array Map of Routes

javascript

reactjs

react-router-v4