Matched leaf route at location “/“ does not have an element. This means it will render an ＜Outlet /＞

使用​

​react-router-dom​

​配置路由的時候，開發者工具中會警告

​

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

​

代碼

import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import routers from './../routers';

function Main() {
  return (
    <Router>
      <Routes>
        {routers.map((item, index) => {
          return (
            <Route
              key={index}
              exact
              path={item.path}
              component={<item.component/>}
            />
          );
        })}
      </Routes>
    </Router>
  );
}

export default Main;      

錯誤原因：

import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import routers from './../routers';

function Main() {
  return (
    <Router>
      <Routes>
        {routers.map((item, index) => {
          return (
            <Route
              key={index}
              exact
              path={item.path}
              element={<item.component/>}
            />
          );
        })}
      </Routes>
    </Router>
  );
}

export default Main;