天天看点

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. ​

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

代码

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;      

继续阅读