Estoy tratando de hacer un programa de registro simple con reaccionar JS, pero me quedé atascado cuando no puede procesar mi aplicación y el componente de registro.
import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import App from "./App"; import Register from "./screens/Register"; ReactDOM.render( <BrowserRouter> <Routes> <Route path="/" exact render={(props) => <App {...props} />} /> <Route path="/register" exact render={(props) => <Register {...props} />} /> </Routes> </BrowserRouter>, document.getElementById("root") );Por lo que sé, no hay ningún accesorio como el render en el componente de route de react-router@v6. Hay ganchos que se pueden usar en sus páginas para obtener datos relacionados con el enrutamiento. Los encontrarás en la documentación oficial . (Considere leer los enlaces sobre la migración desde v5 o desde react-router).
Por supuesto, aún puede pasar accesorios regulares en su componente. Vea un ejemplo en Stackblitz aquí y aquí está el código:
import React, { Component } from 'react'; import { render } from 'react-dom'; import { BrowserRouter, Routes, Link, Route } from 'react-router-dom'; import './style.css'; const Page1 = (props) => <Link to="page2"> {props.test} - Go to Page 2</Link>; const Page2 = () => <Link to="/">Go to Page 1</Link>; const App = () => { return ( <BrowserRouter> <Routes> <Route path="/" exact element={<Page1 test="Test" />} /> <Route path="/page2" exact element={<Page2 />} /> </Routes> </BrowserRouter> ); }; render(<App />, document.getElementById('root'));