Javascript 无道具时对浮动道具警告作出反应

Web包的application.js入口点

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(<App />, document.getElementById('app'))
});

组件/LandingPage.jsx

组件/Navbar.jsx

控制台日志中出现错误：

警告：React无法识别DOM元素上的computedMatch属性。如果您有意将其作为自定义属性显示在DOM中，请将其拼写为小写computedmatch。如果意外地从父组件传递了它，请将其从DOM元素中删除。 在应用程序创建的div中 在应用程序创建的开关中 在应用程序创建的div中 在由BrowserRouter创建的路由器中 应用程序创建的浏览器路由器中 应用程序内

我在其他各种堆栈帖子中读到，这是一个浮动道具错误，当道具半危险地传递时。然而，我并没有在这里传递任何道具，我很困惑为什么会抛出这个错误。应用程序和组件渲染也很好

有什么建议吗？

在App.jsx中，您指定的开关逻辑如下：

      <Switch>
        <div className="container">
          <Route exact path="/app" component={LandingPage} />
          <Route exact path="/app/clients" component={Clients} />
        </div>
      </Switch>

---

但是，交换机组件只希望路由作为其子级。删除该部件，它将解决此错误消息。

computedMatch不会出现在问题代码的任何地方。这个问题还有太多的代码。请更新您的问题，并附上一份说明，说明问题的具体情况，最好是使用[]工具栏按钮上的堆栈片段进行可运行的问题。堆栈代码段支持React，包括JSX。我知道它没有出现在代码中，这就是为什么我如此困惑的原因，这个错误是从哪里来的，再加上应用程序运行良好。我不认为这是太多的代码，前两个是唯一需要的文件，因为第二个是抛出错误的地方。其他组件都是基本组件，添加它们只是为了预先解决一些问题，例如错误指向的div中的组件是什么？因为我在里面不用道具。我明白你关于工作示例的观点，将提供一个codesandbox示例……并将提供一个codesandbox示例。不，那是场外的。正如我上面所说的，把它作为一个现场例子。我下面的回答解决了你的问题吗@Killerpixler？@t-j-crowder现在已经解决了，但它需要作为一个现场例子来满足复制性问题，这是多个文件和导入/导出的问题。非常感谢你

import React from 'react';

const LandingPage = (props) =>(
      <div>
        <h1>Hello World</h1>
      </div>
    )
export default LandingPage

import React from 'react';
class Clients extends React.Component {
  render(props) {
    return(
      <div id="clients" className="clients">
        <div className="row">
          Clients!
        </div>
      </div>
    )
  }
}
export default Clients

import React from 'react'
import {Link} from 'react-router-dom';

const Navbar = (props) => (
  <nav className="navbar navbar-expand-lg navbar-light bg-light">
    <a className="navbar-brand" href="#">Navbar</a>
     <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span className="navbar-toggler-icon"></span>
     </button>
    <div className="collapse navbar-collapse" id="navbarSupportedContent">
      <ul className="navbar-nav mr-auto">
        <li><Link to="/app/clients">GOTO CLIENTS</Link></li>
      </ul>
    </div>
  </nav>

)
export default Navbar

      <Switch>
        <div className="container">
          <Route exact path="/app" component={LandingPage} />
          <Route exact path="/app/clients" component={Clients} />
        </div>
      </Switch>