javascript - 位置 "/cadastro"处的匹配叶路由没有元素。这意味着默认情况下它将呈现一个具有空值的

Question

我已经尝试解决这个问题几个小时了，我所做的一切都会返回同样的错误。

位于“/cadastro”位置的匹配叶路由没有元素。这意味着默认情况下它将呈现具有空值的 an ，从而导致“空”页面。

routes.js 文件

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/>
 );
}

索引.js

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

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

Answer 1

在 Route 中，将 component 更改为 element。

而不是 -<路由路径="/"组件={ }>

这样做-

<路由路径="/"元素={ }>

对于所有的路线。