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;

错误原因：

​​react-router-dom​​6.x版本中，不再通过component指定组件，通过​​element​​进行配置。因此将​​<Route>​​中的component改为​​element​​即可

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;