React floating prop warning without props

Question

application.js (Entry point for 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

---

Error in console log:

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

I read in various other stack posts that this is a floating prop error when passing props around half-hazardly. However I am not passing any props here and am confused as to why this error is thrown. The app and components render fine too.

Any suggestion?

Answer 1

In your App.jsx, you are specifying the Switch logic like this:

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

However, a Switch component only expects Route as its children. Remove the <div className="container"> part and it should resolve this error message.