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

Posted 2023-02-22

【中文标题】React Router 中的“React 无法识别 DOM 元素上的道具”

【英文标题】："React does not recognize the prop on a DOM element" in React Router

【发布时间】：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>
        )
    

【参考方案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