I've been trying to solve this for a few hours now, everything I do returns this same error.

Matched leaf route at location "/cadastro" does not have an element. This means it will render an with a null value by default resulting in an "empty" page.

routes.js file

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

import Cadastro from "./pages/cadastro";
import CadastroGuiasTuristicos from "./pages/cadastro-guia-turistico";
import DetalhesGuiasTuristicos from "./pages/detalhes-guias-turistico";
import GuiasTuristicos from "./pages/guias-turisticos";
import Home from "./pages/home";
import Login from "./pages/login";
import PlanoEstabelecimentos from "./pages/plano-de-assinatura/estabelecimentos";
import PlanoGuias from "./pages/plano-de-assinatura/guias-turisticos";

const RoutesTeste = () => {
    return(
      <BrowserRouter>
      <Routes>
        <Route path="/" ponent={ <Home/> }></Route>
        <Route path="/cadastro" ponent={ <Cadastro/> }></Route>
        <Route path="/cadastro-guia-turisticos" ponent={ <CadastroGuiasTuristicos/> }></Route>
        <Route path="/detalhes-guias-turisticos" ponent={ <DetalhesGuiasTuristicos/> }></Route>
        <Route path="/guias-turisticos" ponent={ <GuiasTuristicos/> }></Route>
        <Route path="/login" ponent={ <Login/> }></Route>
        <Route path="/estabelecimentos" ponent={ <PlanoEstabelecimentos/> }></Route>
        <Route path="/guias-turisticos" ponent={ <PlanoGuias/> }></Route>
      </Routes>  
      </BrowserRouter>
    )
}
export default RoutesTeste;

App.js

import RoutesTeste from './routes';

export default function App() {
 return (
     <RoutesTeste/>
 );
}

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

I've been trying to solve this for a few hours now, everything I do returns this same error.

Matched leaf route at location "/cadastro" does not have an element. This means it will render an with a null value by default resulting in an "empty" page.

routes.js file

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

import Cadastro from "./pages/cadastro";
import CadastroGuiasTuristicos from "./pages/cadastro-guia-turistico";
import DetalhesGuiasTuristicos from "./pages/detalhes-guias-turistico";
import GuiasTuristicos from "./pages/guias-turisticos";
import Home from "./pages/home";
import Login from "./pages/login";
import PlanoEstabelecimentos from "./pages/plano-de-assinatura/estabelecimentos";
import PlanoGuias from "./pages/plano-de-assinatura/guias-turisticos";

const RoutesTeste = () => {
    return(
      <BrowserRouter>
      <Routes>
        <Route path="/" ponent={ <Home/> }></Route>
        <Route path="/cadastro" ponent={ <Cadastro/> }></Route>
        <Route path="/cadastro-guia-turisticos" ponent={ <CadastroGuiasTuristicos/> }></Route>
        <Route path="/detalhes-guias-turisticos" ponent={ <DetalhesGuiasTuristicos/> }></Route>
        <Route path="/guias-turisticos" ponent={ <GuiasTuristicos/> }></Route>
        <Route path="/login" ponent={ <Login/> }></Route>
        <Route path="/estabelecimentos" ponent={ <PlanoEstabelecimentos/> }></Route>
        <Route path="/guias-turisticos" ponent={ <PlanoGuias/> }></Route>
      </Routes>  
      </BrowserRouter>
    )
}
export default RoutesTeste;

App.js

import RoutesTeste from './routes';

export default function App() {
 return (
     <RoutesTeste/>
 );
}

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

• javascript
• reactjs

• Are you using react-router-dom@6? They changed ponent to element, see: reactrouter./docs/en/v6/getting-started/… – Sven Commented Mar 2, 2022 at 19:49
• I made this conversion "<Route path="/cadastro" ponent={ <Cadastro/> }></Route>" – cosmox Commented Mar 2, 2022 at 20:00
• If you're using v6, it should be <Route path="/cadastro" element={ <Cadastro/> } />. – Sven Commented Mar 2, 2022 at 20:02
• It didn't work the same – cosmox Commented Mar 2, 2022 at 20:44

2 Answers 2

In Route ,change ponent to element.

Instead of - <Route path="/" ponent={ }> <Route path="/cadastro" ponent={ }>

do this-

<Route path="/" element={ }> <Route path="/cadastro" element={ }>

for all the Route.

Replace the ponent with element as follows;

<Route path="/" element={ <Home/> }></Route>

It will work...