Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞

problem1¶

About the basic writing of react-router-dom 6.0.1 to solve the Error: A <Route> is only ever to be used as the child of <Routes> problem.

Route needs to be in Routes, the component is element, note that the brackets are tags

// import logo from './logo.svg';
import './App.css';
import { Route, Link, Routes } from 'react-router-dom';
// import the corresponding component
import Home from './View/Home';
import About from './View/About';

function App() {
     return (
         <div className="App">
             <Link to="/">Home</Link>
             <Link to="/about">About Us</Link>
             <Routes>
                 <Route path="/" component={Home} />
                 <Route path="/about" component={About} />
             </Routes>
         </div>
     );
}

export default App;

problem2¶

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.

It should be that the latest raect-router-dom has changed the way of writing. I watched the tutorial video from last year, so the warning was issued when the writing was out of date.