¿Por qué recibo una página en blanco? Reaccionar
He estado aprendiendo React durante unos días y escribí un proyecto simple (aplicación de una sola página). El problema es que mi página no muestra nada: es una página en blanco.
aplicación.js
import './App.css';
import {BrowserRouter as Router,Routes,Route,} from "react-router-dom";
import { Home } from './components/Home';
import { Wallet } from './components/Wallet';
function App() {
return (
<Router>
<Routes>
<Route exact path="/" component={Home}/>
<Route path="/wallet" component={Wallet}/>
</Routes>
</Router>
);
}
export default App;
Cartera.js
import React from "react";
export function Wallet() {
return (
<div>
<h1>Wallet Page!</h1>
</div>
);
}
Inicio.js
import React from "react";
export function Home() {
return (
<div>
<h1>Home Page!</h1>
</div>
);
}
Entonces, cuando voy a http://localhost:3001/ o http://localhost:3001/wallet recibo una página en blanco. ¿Alguien podría indicarme dónde cometí un error?
Aceptado
En react-router-dom@6los Routecomponentes, represente el contenido enrutado en la elementpropiedad como ReactNode, es decir, como JSX. Ya no hay accesorios de función component, o rendery children.
Rutas y Ruta
declare function Route(
props: RouteProps
): React.ReactElement | null;
interface RouteProps {
caseSensitive?: boolean;
children?: React.ReactNode;
element?: React.ReactNode | null;
index?: boolean;
path?: string;
}
Mueva los componentes al elementaccesorio y páselos como JSX normal en lugar de como una referencia a un componente.
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/wallet" element={<Wallet />} />
</Routes>
</Router>
