Me di cuenta de que React Router DOM (v6) ahora usa funciones en sus guías de ayuda con respecto a las páginas en lugar de usar clases.
Clases utilizadas anteriormente como esta:
export class Login extends React.Component { render() { return <p>test</p> } }Sin embargo, después de probar la última versión de React Router DOM, recibí una página vacía para la ruta de navegación.
import {Login} from "./js/components/Auth/Login"; function App() { return <h2>Test</h2> } if (document.getElementById('app')) { ReactDOM.render( <BrowserRouter> <Routes> <Route path="/" element={<App />} /> <Route path="/login" component={() => <Login />} /> </Routes> </BrowserRouter>, document.getElementById('app')) }La aplicación funciona bien (ruta '/'), pero /login devuelve una página vacía sin error.
El inicio de sesión se refiere a una clase que usa render() y devuelve <p>test</p>
¿Estoy haciendo algo mal? ¿Las bibliotecas se inclinan hacia funciones en lugar de componentes de clase?
Esta guía parece estar usando solo funciones para componentes.
Los componentes de clase frente a función son irrelevantes en RRDv6, simplemente representan los componentes de React especificados como JSX, no como una referencia a un componente, y no como una función que devuelve JSX. Tampoco hay accesorios de render o component , los componentes de la Route ahora usan solo element para representar los componentes de la ruta.
<Routes> <Route path="/" element={<App />} /> <Route path="/login" element={<Login />} /> </Routes>