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

控制台日志中的错误：

警告：React无法识别DOM元素上的computedMatch道具。如果您有意让它作为自定义属性出现在DOM中，请将其拼写为小写computedmatch。如果您不小心从父组件传递了它，请将其从DOM元素中删除。在div中（由App创建）在Switch中（由App创建）在div中（由App创建）在路由器中（由BrowserRouter创建）在BrowserRouter中（由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">部分，它将解决此错误消息。

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

1 个答案: