时间戳

首页 > 解决方案 > React Router 中的“React 无法识别 DOM 元素上的道具”

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

问题描述

React 无法识别computedMatchDOM 元素上的 prop。如果您有意希望它作为自定义属性出现在 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>
        )
    }
}

标签： reactjsreact-router-dom

解决方案

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

  1. 有一个path或 一个form与当前位置匹配的道具。
  2. 没有这 2 个道具 ( path, form)

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

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

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 属性/属性，您会收到警告。

未知道具警告

推荐阅读