在没有道具的情况下反应浮动道具警告

Question

application.js（webpack 的入口点）

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

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

App.jsx

import React from 'react'
import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom'

import Navbar from './components/Navbar'
import LandingPage from './components/landingPage'
import Clients from './components/Clients'

class App extends React.Component {
  render(){
    return (
      <Router>
        <div>
          <Navbar />
          <Switch>
            <div className="container">
              <Route exact path="/app" component={LandingPage} />
              <Route exact path="/app/clients" component={Clients} />
            </div>
          </Switch>
        </div>
      </Router>
    )
  }
}
export default App

components/LandingPage.jsx

import React from 'react';

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

components/Clients.jsx

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

components/Navbar.jsx

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

控制台日志错误：

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. in div (created by App) in Switch (created by App) in div (created by App) in Router (created by BrowserRouter) in BrowserRouter (created by App) in App

我在其他各种堆栈帖子中读到，这是在半危险地传递道具时出现的浮动道具错误。但是，我没有在这里传递任何道具，并且对抛出此错误的原因感到困惑。应用程序和组件也呈现良好。

有什么建议吗？

Answer 1

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

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

但是，Switch 组件只需要 Route 作为它的子组件。删除 <div className="container"> 部分，它应该可以解决此错误消息。

在没有道具的情况下反应浮动道具警告

React floating prop warning without props

javascript

reactjs

react-router

react-router-dom

react-dom