React Router 中的“React 无法识别 DOM 元素上的道具”答案

【问题标题】："React does not recognize the prop on a DOM element" in React RouterReact Router 中的“React 无法识别 DOM 元素上的道具”
【发布时间】：2020-02-16 11:46:14
【问题描述】：

React 无法识别 DOM 元素上的 computedMatch 属性。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写 computedmatch。如果您不小心从父组件传递了它，请将其从 DOM 元素中移除。

这是有问题的代码：

import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    NavLink
} from "react-router-dom";
import "./AdminPage.css";

export default class AdminPage extends React.Component {
    render() {
        return (
            <div>
                <Router>
                    <nav>
                        <ul className="nav nav-tabs">
                            <li className="nav-item">
                                <NavLink to="/admin/books" className="nav-link" activeClassName="active">Books</NavLink>
                            </li>
                            <li className="nav-item">
                                <NavLink to="/admin/branches" className="nav-link" activeClassName="active">Branches</NavLink>
                            </li>
                            <li className="nav-item">
                                <NavLink to="/admin/members" className="nav-link" activeClassName="active">Members</NavLink>
                            </li>
                        </ul>
                    </nav>
                    <Switch>
                        <div> <!-- this appears to be the element that is receiving a "computedMatch" property -->
                            <Route exact path="/admin/books">
                                Books
                            </Route>
                        </div>
                    </Switch>
                </Router>
            </div>
        )
    }
}

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

因为Switch 将computedMatch 传递给满足两个条件之一的第一个孩子：

具有与当前位置匹配的 path 或 form 属性。
没有这两个道具（path，form）

您的代码中有问题的元素是 div。

在Switch.js的渲染方法中，你会看到：

React.Children.forEach(this.props.children, child => {
  if (match == null && React.isValidElement(child)) {
    element = child;

    const path = child.props.path || child.props.from;

     match = path
       ? matchPath(location.pathname, { ...child.props, path })
       : context.match;
   }
 });

return match
  ? React.cloneElement(element, { location, computedMatch: match })
  : null;

由于computedMatch 不是合法的 DOM 属性/属性，您会收到警告。

Unknown Prop Warning

【讨论】：