Error: A <Route> is only ever to be used as the child of <Routes>

created at 01-08-2022 views: 18


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>
                 <Route path="/" component={Home} />
                 <Route path="/about" component={About} />

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.

new syntax

created at:01-08-2022
edited at: 01-08-2022: