首页 文章

反复浮动道具警告没有道具

提问于
浏览
0

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'))
});

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

控制台日志出错:

警告:React无法识别DOM元素上的computedMatch prop . 如果您故意希望它作为自定义属性显示在DOM中,请将其拼写为小写的computedmatch . 如果您不小心从父组件传递它,请将其从DOM元素中删除 . 在应用中的div(由App创建)在div中(由App创建)在路由器(由BrowserRouter创建)中的BrowserRouter(由App创建)在App中

我在各种其他堆栈帖子中读到,这是一个浮动道具错误,当道具绕半危险时 . 但是我没有在这里传递任何道具,并且对于为什么抛出这个错误感到困惑 . 应用程序和组件也可以渲染 .

有什么建议吗?

1 回答

  • 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"> 部分,它应该解决此错误消息 .

相关问题