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