React.js router element error stated as null-CodePudding

I'm making a React.js file with two buttons through bootstrap. The rendering code is:

import './App.css';
import Nav from './components/Nav';
import Home from './components/Home';
import Tweet from './components/Tweet';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';


function App() {
  return (
    <Router>
    <div className="App">
      <header className="App-header">
        <Nav />
        <Routes>
          <Route path='/' exact component={Home} />
          <Route path='/tweets' exact component={Tweet} />
        </Routes>
      </header>
    </div>
  </Router>
  );
}

export default App;

but I get an error, that

Matched leaf route at location "/tweets" does not have an element. This means it will render an with a null value by default resulting in an "empty" page.

Can anyone help me?

CodePudding user response：

the Route component need 2 required property, path and element (not component). you set a component property and that is undefined. just you set your component to element property :

<Route path='/' exact element={Home} />
<Route path='/tweets' exact element={Tweet} />