React.js 路由器元素错误表示为空

Question

我正在通过 bootstrap 创建一个带有两个按钮的 React.js 文件。渲染代码为：

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;

但是我得到一个错误，

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.

谁能帮帮我？

Answer 1

路由组件需要 2 个必需的属性，路径和元素（不是组件）。您设置了一个未定义的组件属性。只需将组件设置为元素属性 :

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

React.js 路由器元素错误表示为空

React.js router element error stated as null

html

javascript

compiler-errors

reactjs