React17版本实现路由懒加载

react17版本的react-router-dom的api发生改变，坑了我一笔

index.js

import React, { Component, Suspense } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import {BrowserRouter, Route, Routes, Link, Outlet} from 'react-router-dom';
import reportWebVitals from './reportWebVitals';

const Card = React.lazy(() => import("./src/Card"))
const Messgae = React.lazy(() => import("./src/Messgae"))
const Dog = React.lazy(() => import("./src/Dog"))
const New = React.lazy(() => import("./src/New"))

function lazy (Component)  {
  return <Suspense fallback={<div>loading....</div>}><Component /></Suspense>
}

ReactDOM.render(
  <React.StrictMode>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />}>
            <Route path="Dog" element={lazy(Dog)} />
            <Route path="New" element={lazy(New)} />
            <Route path="Messgae" element={lazy(Messgae)} />
            <Route path="Card" element={lazy(Card)} />
          </Route>
        </Routes>
      </BrowserRouter>,
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

app.js

import logo from './logo.svg';
import './App.css';
import {Link, Outlet} from 'react-router-dom';


function App() {
  return (
    <div className="App">
      <Link to="/Dog">Dog</Link>
      <Link to="/New">New</Link>
      <Link to="/Messgae">Messgae</Link>
      <Link to="/Card">Card</Link>
      <Outlet />
    </div>
  );
}

export default App;