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="/" component={ <Home/> }></Route>
        <Route path="/cadastro" component={ <Cadastro/> }></Route>
        <Route path="/cadastro-guia-turisticos" component={ <CadastroGuiasTuristicos/> }></Route>
        <Route path="/detalhes-guias-turisticos" component={ <DetalhesGuiasTuristicos/> }></Route>
        <Route path="/guias-turisticos" component={ <GuiasTuristicos/> }></Route>
        <Route path="/login" component={ <Login/> }></Route>
        <Route path="/estabelecimentos" component={ <PlanoEstabelecimentos/> }></Route>
        <Route path="/guias-turisticos" component={ <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')
);