[已解决] Matched leaf route at location ““ does not have an element.This means it will render an＜Outle

错误信息

Matched leaf route at location "/" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.
高版本中Switch已经被换成了Routes，点击链接路径变化正常但页面不显示，并在浏览器控制台输出以上警告。

错误代码

import React from 'react-dom';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { HashRouter as Router, Routes, Route, Link } from 'react-router-dom'

ReactDOM.render((
  <Router >
    <Link to="home/">首页</Link>
    <Link to="about/">关于</Link>
    <div>
      <Routes>
        <Route path="/" exact={false} component={<div>home</div>} />
        <Route path="/home" exact={false} component={<div>home</div>} />
        <Route path="/about" exact={false} component={<div>about</div>} />
      </Routes>
    </div>
  </Router>
), document.getElementById('root')
);

reportWebVitals();

正确代码

component改成element即可：

import React from 'react-dom';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { HashRouter as Router, Routes, Route, Link } from 'react-router-dom'

ReactDOM.render((
  <Router >
    <Link to="home/">首页</Link>
    <Link to="about/">关于</Link>
    <div>
      <Routes>
        <Route path="/" exact={false} element={<div>home</div>} />
        <Route path="/home" exact={false} element={<div>home</div>} />
        <Route path="/about" exact={false} element={<div>about</div>} />
      </Routes>
    </div>
  </Router>
), document.getElementById('root')
);

reportWebVitals();

配置，React.js版本等

"dependencies": {
  …
  "react": "^17.0.2",
  "react-app-polyfill": "^2.0.0",
  "react-dev-utils": "^11.0.3",
  "react-dom": "^17.0.2",
  "react-refresh": "^0.8.3",
  "react-router-config": "^5.1.1",
  "react-router-dom": "^6.0.2",
  "webpack": "4.44.2",
  "webpack-dev-server": "3.11.1",
  "webpack-manifest-plugin": "2.2.0",
  "workbox-webpack-plugin": "5.1.4"
}

文末有好东西

??好东西